小程序单选框的实现

小鱼儿 2022-12-14 12:26 202阅读 0赞

## ***小程序 单选框的实现*** ##

搞了一天这个小程序单选框实现 这次记录一下如何实现  
先看效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjY0MzI5_size_16_color_FFFFFF_t_70_pic_center]首先实现单选框  
放代码 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” 方法  
这个已经在上面的代码写了 如果你复制上面的代码这里就不用做操作了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjY0MzI5_size_16_color_FFFFFF_t_70_pic_center 1]  
第二步 在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值了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjY0MzI5_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjY0MzI5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6dee48eb04db43209b39e83b8111e931.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjY0MzI5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/85f16aa61a504b44b086687d8593a5a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjY0MzI5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/60955d36aa67441eaadb92fdb806de22.png