小程序 单选框的实现
搞了一天这个小程序单选框实现 这次记录一下如何实现
先看效果图
首先实现单选框
放代码 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值了