微信小程序、radio组件、checked属性、保存单选组件的勾

关键词：微信小程序、radio组件、checked属性、保存单选组件的勾选状态、缓存

需求点：用户选择单选radio组件的时候，将勾选的值保存下来并保存到缓存中。
返回上一层页面或者重新进入页面，读取缓存中的值，然后将单选按钮设置为选中状态。

如下图所示：

关键代码如下：设置data中的genders数据完成后，需要使用this.setData()重新更新genders

Page({
  data: {
  //radio数据
    genders:[
      { name: 1, value: '先生', selected: false},
      { name: 0, value: '女士', selected: false}
    ],
  },
  //页面载入的时候读取缓存中 的内容。
  onLoad: function (options) {
    let that = this;
      wx.getStorage({
        key: 'oNewAddress',
        success: function(res) {
        //关键点：如果为1，则勾选男性
          if (res.data.gender == 1) {
          //设置selected为true
            that.data.genders[0].selected = true;
            that.data.genders[1].selected = false;
            //更新data中的数据
            that.setData({
              genders:that.data.genders
            })
          } else {
            that.data.genders[0].selected = false;
            that.data.genders[1].selected =true;
            that.setData({
              genders:that.data.genders
            })
          }
        },
        fail:()=>{
        }
      })
      
  },
  getGenderChange:function(e){
    console.log(e);
    this.setData({
      gender: e.detail.value
    })
    let oNewAddress = { gender: gender }
    wx.setStorage({
      key: 'oNewAddress',
      data: oNewAddress,
    })
    wx.showToast({
      title: '保存成功',
    })
  },
})

视图层：

 <radio-group class="radio-group" bindchange="getGenderChange">
  <label class="radio" wx:for="{{genders}}" wx:key="index">
    <radio value="{{item.name}}" checked="{{item.selected}}"/>{{item.value}}
  </label>
</radio-group>