2019-02-21  3,793 views 1

小程序Radio初始化绑定数据选中项及获取Radio选择的Value解决方案

ASP.NET开发微信小程序其他教程文章见总目录:ASP.NET小程序开发目录总览(ASP.NET WEBAPI ASP.NET CORE微服务)

一、初始化数据绑定

以性别选择为例,希望实现效果,默认选择为先生,但是页面OnLoad后获取用户实际性别并绑定Radio

前端代码(View):

<view class='ls-react-view w90 ls-border-bottom border-box padding-10-0'>
   <view class='ls-react-view w30 ls-card-row h3'>
      性别
   </view>
   <view class='ls-react-view w70 ls-vertical-align txt-right grey h4'>
      <radio-group class="radio-group" bindchange="radioChange" name="gender">
        <label class="radio" wx:for="{{genderItems}}">
           <radio class="radio" value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />{{item.value}}
        </label>
      </radio-group>
    </view>
</view>

默认效果如图所示:

JS代码(Data数据):

data: {
    genderItems: [{
        value: '1',
        name: '先生',
        checked:true
      },
      {
        value: '2',
        name: '女士'
      }
    ],
    genderSelected: "",
    userInfo: null
}

实现逻辑,按照业务逻辑,当前页面加载,即OnLoad事件调用时应当判断用户是否登录,如果登录则获取用户的信息,并赋值给当前页面data中的userInfo,随后获取当前userInfo中的性别数据,并绑定到页面。

此时需要提一下小程序开发的两个大坑,如果有了解的可以跳过:》》》》》》》》》》》》》》》》

A、赋值方式的大坑,按照正常情况为js中的data数据赋值有两种方式

  • 使用“=”赋值 即data.val赋值方式
  • 使用setData赋值,即使用setData({ })赋值方式

两者的区别是setData赋值方式除了修改了data的数据,同时会改变视图(View),而this.data.value 的“=”赋值方式可以修改data的数据,但是试图是不会变更的,需要重新刷新页面才会改变视图。

(PS:“=”复制方式在对复杂数组赋值直接不起作用这是测试所得,如果哪位朋友是可以成功,可以提供下方案,本人说的不一定准确)

 

B、另一个需要注意的坑就是this和that的区别的大坑,我们在小程序源码中经常看到如下代码

var that = this;
that.setData({
   userInfo: userInfo
})

this代表着当前的对象,它在程序中随着执行的上下文随时会变化。在本例中回调函数对象相对于showactionsheet点击事件函数对象已经发生了变化。所以已经不是原来的页面对象了。自然就没有了data属性,也没有了data.itemLists属性了。解决的办法就是复制一份当前的对象。所以就有了如上代码的操作。 var that=this; 是把this对象复制到临时变量that。

这时候我们使用that 就不会找不到原来的对象了。

以上两个坑简单的解释了下,接着继续回归性别绑定的业务操作。》》》》》》》》》》》》》》》》

 

方法一(使用临时变量重写data中的数据  不推荐):

OnLoad事件代码如下:

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function(options) {
  loginHanldler.isLogin(() => {
    var userInfo = store.pull('storeServerUser');
    var that = this;
    var tempCell = null;
    var tempArry = that.data.genderItems;
    for (var i = 0;i < that.data.genderItems.length;i++){
      if(that.data.genderItems[i].value == userInfo.Sex){
        tempCell = that.data.genderItems[i];
        tempCell.checked =true;
        tempArry[i] = tempCell
      }
    }
    that.setData({
      genderItems: tempArry,
      userInfo: userInfo
    })
  })
}

loginHanldler.isLogin 判断是否登录会在之后的文章中会有阐述,store.pull('storeServerUser')是在localStorage中获取登录的用户信息,根据用户信息中的性别信息(1-男性 2-女性),进行数据绑定。

Step1:创建两个变量分别为tempCell和tempArry,tempCell是用于存储修改后的对象(即男性或女性是否选中),tempArry用于临时存储data中的性别数组数据。

Step2:将修改后的对象覆盖tempArry中的对应的单元

Step3:使用setData方法将tempArry赋值给genderItems

这样data中的genderItems就被重置了,同样视图也将被重置,这样就完成了Radio的初始化。

 

方法二

OnLoad事件代码如下:

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function(options) {
  loginHanldler.isLogin(() => {
    var userInfo = store.pull('storeServerUser');
    var that = this;
    for (var i = 0;i < that.data.genderItems.length;i++){
      if(that.data.genderItems[i].value == userInfo.Sex){
        let checkItem = "genderItems["+i+"].checked";
        that.setData({
    userInfo: userInfo,
          [checkItem]: true
        })
      }
    }
  })
}

同样的方式获取用户信息,并循环genderItems性别数组,判断是否与当前用户的性别值相等,相等则设置当前的性别对象的checked属性为true。只是需要注意的是设置数组或者对象中的某个元素,需要先将需要修改的元素索引拼接为字符串,如:"genderItems[1].checked",在setData的时候需要对存储的元素索引的字符串变量外加上[],这样就能完成Radio的初始化数据绑定了。

最终实现的默认初始化效果如下图:

二、Radio数据切换后值的获取

小程序开发中Radio的数据绑定同样可以理解成键值对的数据,在Radio的选择事件中设置当前选中的值,在提交中直接获取选中的值即可。

在data数据定义中我们已经定义了genderSeleted用于存储当前选择的用户性别信息,视图中的Radio组件绑定了Radio的change事件,如下代码:

1 条留言  访客:0 条  博主:0 条   引用: 1 条

来自外部的引用: 1 条

  • ASP.NET小程序开发目录总览(ASP.NET WebAPI ASP.NET Core微服务) | 落雨信息

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: