小程序单选框 radio

本文主要是介绍小程序单选框 radio，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<view class="gender-box">
  <radio-group class="radio-group" bindchange="radioChange"  >
  <view class="gender-con gender-con-border">
    <view class="gender-con-cell">
      <view class="gender-text">男</view>
        <radio bindtap='Checked' data-type='1' checked="{{gender==1?true:false}}" color="#F80000"/>
    </view>
  </view>
  <view class="gender-con">
    <view class="gender-con-cell">
      <view class="gender-text">女</view>
        <radio bindtap='Checked' data-type='2' checked="{{gender==2?true:false}}" color="#F80000"/>
    </view>
  </view>
</radio-group>
</view>
<view class="btns {{gender?'':'disableBtn'}}">
  <view class="btn" bindtap="saveInfor" >保存</view>
</view>

wxss

/* subpackageA/pages/invoiceManage/addInvoice/addInvoice.wxss */
.section {
  padding: 20rpx 0 0 0;
  margin-bottom: 102rpx;
}

.section .title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.o-btn-group {
  display: flex;
  align-items: center;

}

.o-btn-group .w-btn {
  margin-right: 15rpx;
}

.o-btn-group .o-btn {
  background: #ffeceb;
}

.clear {
  width: 40rpx;
  height: 40rpx;
  padding: 12rpx;
}

.submit-btn {
  margin: 50rpx 30rpx
}

.jd-cell-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
  padding-top: 24rpx;
  box-sizing: border-box;
  height: 88rpx;
  box-sizing: border-box;
}

.btns {
  width: 100%;
  text-align: center;
}

.btn {
  width: 660rpx;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(270deg, #F80000 0%, #FF4E18 100%);
  border-radius: 45rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #FFFFFF;
  text-shadow: 0px 4rpx 10rpx rgba(248, 0, 0, 0.2);
  margin: 0 auto;
}
.gender-box{
  background: #ffffff;
  border-radius: 10rpx;
  margin:20rpx 20rpx 100rpx 20rpx;
}
.gender-con{
  margin:0 20rpx;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100rpx;
}
.gender-con-border{
  border-bottom: 2rpx solid #F1F1F1;
}
.gender-con-cell{
  justify-content: space-between;
  display: flex;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 28rpx;
  width: 100%;
}
.gender-con-cell input{
  width: 100%;
}
.name-tips{
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24rpx;
  margin-bottom: 82rpx;
  padding-left: 40rpx;
}
.disableBtn{
  opacity: 0.3;
}
.gender-text{
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 28rpx;
}

js

const Util = require('./utils/util.js');
const app = getApp()
const {
  regeneratorRuntime
} = global

Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender: '0', 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   //  this.getCurrentUserInfo() //获取当前用户信息
  },
  async getCurrentUserInfo() {
    let result = await Util.getUserInfo();
    this.setData({
        gender: result.gender
    })
  },

  alert(title, options = {}) {
    wx.showToast({ icon: 'none', title: title, ...options })
  },
  // 保存
  async saveInfor() {
    if(!this.data.gender){
      return
    }
    let params = {
      gender:this.data.gender
    }
    let res = await Util.request('/update', params, true)
    console.log('添加保存:::', res)
    if (res) {
      wx.showToast({
        title: '保存成功',
        mask: true
      })
      setTimeout(() => {
        wx.navigateBack({
          delta: 1,
        })
      }, 1500);
    }
   
  },
  async Checked(e) {
    let gender = e.currentTarget.dataset.type;
    this.setData({
      gender: gender
    })
},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  }
})

这篇关于小程序单选框 radio的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！