小程序开发之路---定制segmentView

目前，小程序是火得一塌糊涂啦，传统的app太重量级了，小程序作为一款轻量级app，在目前快节奏的开发环境中，占有一席之地也是必然的。

小程序-API已经能满足平时的小练习了，但具体开发中需要用到的组件，还有一大部分需要在座的程序员努力啦，开发，总是在造轮子的路上越走越远。。。

在iOS中有UISegmentViewController按钮视图控制器，也可以通过自定义、继承等方法实现个性化的定制，小程序目前还没有现成的segmentView组件，所以在开发之余，把自己项目中写的自定义组件粘出来，希望能对你有所启发。

直接上代码。。。。

JS部分：

data: {
    segmentData: [
      { title: '周', selected: true },   //默认选中
      { title: '月', selected: false },
      { title: '年', selected: false }
    ]
  },
segmentDidTap: function (e) {
    var that = this;
    var index = e.currentTarget.dataset.index;
  
    if (that.data.segmentData[index].selected) {
      return
    }
    for (var i in that.data.segmentData) {
      if (i == index) {
        that.data.segmentData[i].selected = true
      } else {
        that.data.segmentData[i].selected = false
      }
    }
    that.setData({
      segmentData: that.data.segmentData
    })
  }

WXML部分：

<view wx:for="{{segmentData}}" wx:for-index="index" wx:for-item="value" wx:key="key">
      <view class='segmentItem {{value.selected&&"segmentItem_Selected"}}' bindtap='segmentDidTap' data-index='{{index}}' data-title='{{value.title}}'>{{value.title}}</view>
</view>

WXSS部分：

.segmentItem{
  border: 2rpx solid gray;
  text-align: center;
  width: 225rpx; 
}
.segmentItem_Selected{
  background-color: gray;
}