RadioGroup代替方案，类似iOS中UISegmentedControl

admin

RadioGroup代替方案，类似iOS中UISegmentedControl

RadioGroup代替方案，类似iOS中UISegmentedControl

RadioGroup代替方案，类似iOS中UISegmentedControl

#布局

##1.样式表

外圈是一个圆角的矩形

内部是第N段取值，其中最后一段为空，声明class为last

选中为底色+白字，普通状态则反之，声明class为selected

1. /*LXSegmentedControl容器*/
   
2. .segmentedControl {
   
3.         /*水平居中*/
   
4.         margin: 30px auto;
   
5.         /*边框为2px 主色调为蓝*/
   
6.         border: 2px solid #39f;
   
7.         /*圆角6px*/
   
8.         border-radius: 6px;
   
9.         /*控件宽度*/
   
10.         width: 240px;
    
11.         /*控件高度*/
    
12.         height: 30px;
    
13. }
    
14. 
    
15. /*普通文本*/
    
16. .segmentedControl text {
    
17.         /*水平排列*/
    
18.         float: left;
    
19.         /*宽度为控件宽度的1/3 再减去2px的右边框*/
    
20.         width: 78px;
    
21.         /*字体大小*/
    
22.         font-size: 14px;
    
23.         /*主色调*/
    
24.         color: #39f;
    
25.         /*行高，与控件高度相等*/
    
26.         line-height: 30px;
    
27.         /*文本水平居中*/
    
28.         text-align: center;
    
29.         /*右边距*/
    
30.         border-right: 2px solid #39f;
    
31. }
    
32. 
    
33. /*选中状态文本*/
    
34. .segmentedControl text.selected {
    
35.         /*同主色调*/
    
36.         background-color: #39f;
    
37.         /*前景色为白色*/
    
38.         color: white;
    
39. }
    
40. 
    
41. /*最后一个分组按钮*/
    
42. .segmentedControl text.last {
    
43.         /*不必右边框*/
    
44.         border-right: 0;
    
45.         /*高度也不必减少2px，就是控件高度的1/3*/
    
46.         width: 80px;
    
47. }

复制代码

##2.写上静态的数据作为测试

1. <view class="segmentedControl">
   
2.         <text>男</text>
   
3.         <text class="selected">女</text>
   
4.         <text class="last">保密</text>
   
5. </view>

复制代码

这里有一个坑：

1. <text>男</text>

复制代码

不等同于

1. <text>
   
2.         男
   
3. </text>

复制代码

后者会变成占据两行

##3.改进为数组

1. Page({
   
2.         data: {
   
3.                 radioValues: [
   
4.                         {'value': '男','selected': false},
   
5.                         {'value': '女','selected': true},
   
6.                         {'value': '保密','selected': false},
   
7.                 ]
   
8.         }
   
9. })

复制代码

##4.循环遍历与样式判断

1. <view class="segmentedControl">
   
2.         <!-- 循环遍历 -->
   
3.         <block wx:for="{{radioValues}}">
   
4.                 <!-- 找出最后一段 -->
   
5.                 <text class="last" wx:if="{{index == radioValues.length - 1}}">{{item.value}}</text>
   
6.                 <!-- 判断是不是选中状态 -->
   
7.                 <text class="selected" wx:elif="{{item.selected}}">{{item.value}}</text>
   
8.                 <!-- 普通按钮 -->
   
9.                 <text wx:else>{{item.value}}</text>
   
10.         </block>
    
11. </view>

复制代码

注意：以上判断是错的，当最后一个高亮时却不出selected效果，于是后文再重写。

##5.点击text处理高亮与否

1. indexChanged: function(e){
   
2.                 // 点中的是组中第个元素
   
3.                 var index = e.target.dataset.index;
   
4.                 // 读取原始的数组
   
5.                 var radioValues = this.data.radioValues;
   
6.                 for (var i = 0; i < radioValues.length; i++){
   
7.                         // 全部改为非选中
   
8.                         radioValues[i].selected = false;
   
9.                         // 当前那个改为选中
   
10.                         radioValues[index].selected = true;
    
11.                 }
    
12.                 // 写回数据
    
13.                 this.setData({
    
14.                         radioValues: radioValues
    
15.                 });
    
16.                 // clazz状态
    
17.                 this.clazzStatus();
    
18.         },

复制代码

##6.第4条判断样式表逻辑错误

索性改为提供数据源的方式来实现，wxml中就不做判断了，wx:if只能对等标签上判断，实在不好用。

1. clazzStatus: function(){
   
2.                 /* 此方法分别被加载时调用，点击某段时调用 */
   
3.                 // class样式表如"selected last","selected"
   
4.                 var clazz = [];
   
5.                 // 参照数据源
   
6.                 var radioValues = this.data.radioValues;
   
7.                 for (var i = 0; i < radioValues.length; i++){
   
8.                         // 默认为空串，即普通按钮
   
9.                         var cls = '';
   
10.                         // 高亮，追回selected
    
11.                         if (radioValues[i].selected) {
    
12.                                 cls += 'selected ';
    
13.                         }
    
14.                         // 最后个元素, 追加last
    
15.                         if (i == radioValues.length - 1) {
    
16.                                 cls += 'last ';
    
17.                         }
    
18.                         //去掉尾部空格
    
19.                         cls = cls.replace(/(\s*$)/g,'');
    
20.                         clazz[i] = cls;
    
21.                 }
    
22.                 // 写回数据
    
23.                 this.setData({
    
24.                         clazz: clazz
    
25.                 });
    
26.         }

复制代码

然后分别在onLoad与indexChanged调用它即可。

而布局文件也变得异常清晰，数据与视图分离了：

1. <view class="segmentedControl">
   
2.         <!-- 循环遍历 -->
   
3.         <block wx:for="{{radioValues}}">
   
4.                 <text data-index="{{index}}" bindtap="indexChanged" class="{{clazz[index]}}">{{item.value}}</text>
   
5.         </block>
   
6. </view>

复制代码

链接：https://pan.quark.cn/s/6308d45d72ec

提取码下载：

文件名称:提取码下载.txt 
下载次数:0  文件大小:12 Bytes  售价:10金钱 [记录]
下载权限: 不限 [购买VIP]   [充值]   [在线充值]   【VIP会员6折；永久VIP4折】

安全检测，请放心下载