微信小程序选项卡Tab组件

小程序tab选项卡组件

看了小程序里面的组件，发现没有选项卡，于是在github上搞个组件吧github项目地址，同时这个工程中也会陆续添加其他的组件。其实主要就是tab中选中的样式通过 变量判断class, 领外data-index可以通过点击事件的currentTarget.dataSet拿到，其他的就是样式拉，发现div元素也可以用，hhhh~~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="nav-tabs">
  <div class="tab {{currentIndex==0 ? 'active': ''}}" bindtap="changetab" data-index="0">
    <view>
      tab1
    </view>
  </div>
  <div class="tab {{currentIndex==1 ? 'active': ''}}" bindtap="changetab" data-index="1">
    <view>
      tab2
    </view>
  </div>
  <div class="tab {{currentIndex==2 ? 'active': ''}}" bindtap="changetab" data-index="2">
    <view>
      tab3
    </view>
  </div>
  <div class="tab {{currentIndex==3 ? 'active': ''}}" bindtap="changetab" data-index="3">
    <view>
      tab4
    </view>
  </div>
</div>

css， 各种伪元素也都支持了, 样式加了transform效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.nav-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tab {
  position: relative;
  padding: 15px;
}
view::after {
  content: "";
  height: 2px;
  position: absolute;
  background:#2196f3;
  width: 100%;
  left: 0;
  bottom: 0;
  transition: all;
  transition-duration: .5s;
  transform: scale(0);
}
.active view::after {
  transform: scale(1);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Page({
  /**
   * 页面的初始数据
   */
  data: {
    inputShowed: false,
    inputVal: "",
    currentIndex: 0,
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function (e) {
    this.setData({
      inputVal: e.detail.value
    });
  },
  changetab: function(e){
    console.log(e);
	//每次点击重置index
    this.setData({
      currentIndex : e.currentTarget.dataset.index
    })
  },
})