#RadioGroup代替方案，类似iOS中UISegmentedControl
#布局
##1.样式表
外圈是一个圆角的矩形
内部是第N段取值，其中最后一段为空，声明class为last
选中为底色+白字，普通状态则反之，声明class为selected
/*LXSegmentedControl容器*/.segmentedControl {/*水平居中*/margin: 30px auto;/*边框为2px 主色调为蓝*/border: 2px solid #39f;/*圆角6px*/border-radius: 6px;/*控件宽度*/width: 240px;/*控件高度*/height: 30px;}/*普通文本*/.segmentedControl text {/*水平排列*/float: left;/*宽度为控件宽度的1/3 再减去2px的右边框*/width: 78px;/*字体大小*/font-size: 14px;/*主色调*/color: #39f;/*行高，与控件高度相等*/line-height: 30px;/*文本水平居中*/text-align: center;/*右边距*/border-right: 2px solid #39f;}/*选中状态文本*/.segmentedControl text.selected {/*同主色调*/background-color: #39f;/*前景色为白色*/color: white;}/*最后一个分组按钮*/.segmentedControl text.last {/*不必右边框*/border-right: 0;/*高度也不必减少2px，就是控件高度的1/3*/width: 80px;}##2.写上静态的数据作为测试
<view class="segmentedControl"><text>男</text><text class="selected">女</text><text class="last">保密</text></view>这里有一个坑：
<text>男</text>不等同于
<text>男</text>后者会变成占据两行
##3.改进为数组
Page({data: {radioValues: [{'value': '男','selected': false},{'value': '女','selected': true},{'value': '保密','selected': false},]}})##4.循环遍历与样式判断
<view class="segmentedControl"><!-- 循环遍历 --><block wx:for="{{radioValues}}"><!-- 找出最后一段 --><text class="last" wx:if="{{index == radioValues.length - 1}}">{{item.value}}</text><!-- 判断是不是选中状态 --><text class="selected" wx:elif="{{item.selected}}">{{item.value}}</text><!-- 普通按钮 --><text wx:else>{{item.value}}</text></block></view>注意：以上判断是错的，当最后一个高亮时却不出selected效果，于是后文再重写。
##5.点击text处理高亮与否
indexChanged: function(e){// 点中的是组中第个元素var index = e.target.dataset.index;// 读取原始的数组var radioValues = this.data.radioValues;for (var i = 0; i < radioValues.length; i++){// 全部改为非选中radioValues[i].selected = false;// 当前那个改为选中radioValues[index].selected = true;}// 写回数据this.setData({radioValues: radioValues});// clazz状态this.clazzStatus();},##6.第4条判断样式表逻辑错误
索性改为提供数据源的方式来实现，wxml中就不做判断了，wx:if只能对<view>等标签上判断，实在不好用。
clazzStatus: function(){/* 此方法分别被加载时调用，点击某段时调用 */// class样式表如"selected last","selected"var clazz = [];// 参照数据源var radioValues = this.data.radioValues;for (var i = 0; i < radioValues.length; i++){// 默认为空串，即普通按钮var cls = '';// 高亮，追回selectedif (radioValues[i].selected) {cls += 'selected ';}// 最后个元素, 追加lastif (i == radioValues.length - 1) {cls += 'last ';}//去掉尾部空格cls = cls.replace(/(s*$)/g,'');clazz[i] = cls;}// 写回数据this.setData({clazz: clazz});}然后分别在onLoad与indexChanged调用它即可。
而布局文件也变得异常清晰，数据与视图分离了：
<view class="segmentedControl"><!-- 循环遍历 --><block wx:for="{{radioValues}}"><text data-index="{{index}}" bindtap="indexChanged" class="{{clazz[index]}}">{{item.value}}</text></block></view>正文完
源码下载：关注下方的公众号->回复数字1010
对小程序开发有趣的朋友关注公众号: huangxiujie85，QQ群: 581513218，微信: small_application，陆续还将推出更多作品。
