专业 靠谱 的软件研发伙伴

您的位置:首页 > 新闻动态 > 小程序开发之路---定制segmentView

发布日期:2222-02-02

小程序开发之路---定制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;
}

推荐阅读: