taiyang2014

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;
}

posted on 2017-08-21 17:45  taiyang2014  阅读(133)  评论(0编辑  收藏  举报

导航