微信小程序 单选框的实现

小程序 单选框的实现

搞了一天这个小程序单选框实现 这次记录一下如何实现
先看效果图
首先实现单选框
放代码 WXML

<view class="page-body">
  <view class="page-section">
  <view class="view-cl">
    <view class="page-section-title">请选择处理结果</view>
  </view>
    <view class="weui-cells weui-cells_after-title">
      <radio-group bindchange="radioChange">
        <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
          <view class="weui-cell__hd">
            <radio value="{{item.value}}" checked='true'/>
          </view>
          <view class="weui-cell__bd">{{item.name}}</view>
         </label>
      </radio-group>
    </view>
  </view>
</view>

JS 代码

Page({
  data:{
    Processing:'3',
    items: [
      {value: '1', name: '自行处理',},
      {value: '2', name: '送医'},
      {value: '3', name: '其他'},
    ]
  }
  })

之后页面的单选样式就应该出来了 现在如何获取我们选择的value呢

步骤 第一步 使用 bindchange=“radioChange” 方法
这个已经在上面的代码写了 如果你复制上面的代码这里就不用做操作了

第二步 在data里面设置一个变量 这个和上面的代码是一样的 Processing:‘3’ 是我设置的一个变量 因为在第一次打开页面的时候默认是选择最底下的那一个 value=3 就是最下面那个 在第一次打开页面的时候是获取不到初始选择的value的 所以我们要创建一个变量 然后给他默认加到最底下那一个的value

 data:{
    Processing:'3',
    items: [
      {value: '1', name: '自行处理',},
      {value: '2', name: '送医'},
      {value: '3', name: '其他'},
    ]
  },

第三步 在js里面写 radioChange:function(e)方法
在页面每次点击单选的时候 这个方法就会收到过来的value值 我把收到的value值放到提前设置好的变量里面

  //设置单选value
  radioChange:function(e){
    var that = this;
    that.setData({
      Processing:e.detail.value
    })
 }

之后我们在每次使用的时候去调用 that.data.Processing 就能获取到每次传来的value值了