小程序单选样式,防止下次找不到

43 阅读1分钟

image.png

<!--packageF/pages/addperson/addperspon.wxml-->
<view class="inputbox">
        <view class="inptxt">性别</view>
        <view class="inpbox">
          <radio-group bindchange="radioChange" class="inp radiogroup">
            <view class="radiobox" wx:for="{{sex}}" wx:key="value">
              <radio value="{{item.id}}" color="#0099FF" checked="{{item.checked}}"/>
              <view class="radiotxt">{{item.value}}</view>
            </view>
          </radio-group>          
        </view>
</view>
// packageF/pages/addperson/addperspon.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    sex: [{
      id: 1,
      value: '男'
    }, {
      id: 2,
      value: '女'
    }],

  },
// sexinp
radioChange: function (e) {
  // console.log('radio发生change事件,携带value值为:', e.detail.value)
  const sex = this.data.sex
  for (let i = 0, len = sex.length; i < len; ++i) {
    sex[i].checked = sex[i].id == e.detail.value
  }
  this.setData({
    sex
  })
  console.log(this.data.sex);
},
  
  onLoad(options) {

  },
  onReady() {

  },
  onShow() {

  },
  onHide() {

  },
  onUnload() {

  },
})
/* packageF/pages/addperson/addperspon.wxss */

.inputbox {
	display: flex;
	flex-direction: row;
 justify-content: space-between;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	margin-top: 10rpx;
	border-bottom: 1px solid #f1f1f1;
	font-size: 32rpx;
	color: #353535;

	
}
.inptxt {
	white-space: nowrap;
}

.inpbox {
	width: 100%;
	margin-left: 20rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	
}
.inp {
	position: relative;
	width: 100%;
	height: 80rpx;
}

.telinpbox {
	width: 240rpx;
	overflow: hidden;
	margin-top: 10rpx;
	
}
.telinp {
	width: 55rpx;
	height: 55rpx;
	overflow: hidden;
	margin-left: 25rpx;
}
.radiogroup {
	display: flex;
	flex-direction: row;


}
.radiobox {
	display: flex;
	flex-direction: row;
	margin-left: 50rpx;
}