xml
<view class="segmentedControl">
<!-- 循环遍历 -->
<block wx:for="{{radioValues}}">
<text data-index="{{index}}" bindtap="indexChanged" class="{{clazz[index]}}">{{item.value}}</text>
</block>
</view>
css
/*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 {
/*同主色调*/
/*前景色为白色*/
color: white;
}
/*最后一个分组按钮*/
.segmentedControl text.last {
/*不必右边框*/
border-right: 0;
/*高度也不必减少2px，就是控件高度的1/3*/
width: 80px;
}
js
Page({
data: {
radioValues: [
{'value': '男','selected': false},
{'value': '女','selected': true},
{'value': '保密','selected': false},
],
clazz: []
},
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();
},
onLoad: function(){
// onLoad 比 onReady 更早调用，后者为选中时屏幕闪动一下
this.clazzStatus();
},
clazzStatus: function(){
/* 此方法分别被加载时调用，点击某段时调用 */
// class样式表如"selected last","selected"
var clazz = [];
// 参照数据源
var radioValues = this.data.radioValues;
for (var i = 0; i < radioValues.length; i++){
// 默认为空串，即普通按钮
var cls = '';
// 高亮，追回selected
if (radioValues[i].selected) {
cls += 'selected ';
}
// 最后个元素, 追加last
if (i == radioValues.length - 1) {
cls += 'last ';
}
//去掉尾部空格
cls = cls.replace(/(\s*$)/g,'');
clazz[i] = cls;
}
// 写回数据
this.setData({
clazz: clazz
});
}
})
/*普通文本*/
.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 {
/*同主色调*/
/*前景色为白色*/
color: white;
}
/*最后一个分组按钮*/
.segmentedControl text.last {
/*不必右边框*/
border-right: 0;
/*高度也不必减少2px，就是控件高度的1/3*/
width: 80px;
}