segmentController

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;

}