idiot

小程序简单的选项卡

2019-12-30

最近项目中有个设计到tabs选项卡的小玩意,项目最后要部署在小程序和安卓端(套壳),现成了tabs组件(小程序可用的)我没有找到,只好手动来个简单的实现下功能了闲来无聊记下过程

我是用的uniapp的环境,它刚好自带了同小程序中一样的swiper组件,拿swiper做tabs再合适不过了。思路大概是手写tabs样式,tabs内容用swiper来装。
ok,先写tabs选项卡的选项吧,简单点就好,先给出容器

1
2
3
4
5
6
<view class="swiper-tab">
<view class="swiper-tab-item">可回收物</view>
<view class="swiper-tab-item">有害垃圾</view>
<view class="swiper-tab-item">厨余垃圾</view>
<view class="swiper-tab-item">其他垃圾</view>
</view>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
.swiper-tab {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
flex-direction: row;
background-color: #fff;
margin-bottom: 10px;
}
.swiper-tab-item {
flex: 1;
color: #434343;
}

大概就是这个样子了

再加上swiper作为标签内容容器

1
2
3
4
5
6
7
8
9
<swiper duration="300"
:current="currentTab"
@change="swiperChange"
>
<swiper-item>AAA</swiper-item>
<swiper-item>BBB</swiper-item>
<swiper-item>CCC</swiper-item>
<swiper-item>DDD</swiper-item>
</swiper>

current属性指定当前要显示的页面索引,change为swiper改变页面回调,一般轮播组件都有类似的方法。这里current绑定了自己的变量方便操作-点击选项卡的时候改变currentTab的值就好了

1
2
3
4
5
6
7
8
9
10
clickTab(pageIdx) {
if (this.currentTab === pageIdx) {
return false;//当前页面不用管
} else {
this.currentTab = pageIdx;
}
},
swiperChange(e) {
this.clickTab(e.target.current);//e.target.current是传过来的当前页索引
}

先前的tabs组件加上点击事件

1
2
3
4
5
6
<view class="swiper-tab">
<view class="swiper-tab-item" @click="clickTab(0)">可回收物</view>
<view class="swiper-tab-item" @click="clickTab(1)">有害垃圾</view>
<view class="swiper-tab-item" @click="clickTab(2)">厨余垃圾</view>
<view class="swiper-tab-item" @click="clickTab(3)">其他垃圾</view>
</view>

好了 基本的功能写完了,就差之前一直没管的选项卡激活样式了,到这里了就方便了,通过当前Tab索引选择性加入样式就好了

1
2
3
4
.active{
color: #f65959;
border-bottom:1px solid #f65959
}

之前的页面代码加上条件

1
2
3
4
<view class="swiper-tab">
<view :class="['swiper-tab-item', currentTab == 0 ? 'active' : '']" @click="clickTab(0)">可回收物</view>
...
</view>

完工。不过,这种用边框来做的方式有时并不能满足需求,比如下面的线我要求略短于文字宽度之类的..
还是拿伪类做吧
 
完整代码:

1
2
3
4
5
6
<view class="swiper-tab">
<view class="swiper-tab-item" @click="clickTab(0)"><span :class="['tab-text', currentTab == 0 ? 'active' : '']">可回收物</span></view>
<view class="swiper-tab-item" @click="clickTab(1)"><span :class="['tab-text', currentTab == 1 ? 'active' : '']">有害垃圾</span></view>
<view class="swiper-tab-item" @click="clickTab(2)"><span :class="['tab-text', currentTab == 2 ? 'active' : '']">厨余垃圾</span></view>
<view class="swiper-tab-item" @click="clickTab(3)"><span :class="['tab-text', currentTab == 3 ? 'active' : '']">其他垃圾</span></view>
</view>

样式

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
.swiper-tab {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
flex-direction: row;
background-color: #fff;
margin-bottom: 10px;
.swiper-tab-item {
flex: 1;
.tab-text {
position: relative;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
height: 100%;
white-space: nowrap;
font-size: 15px;
color: #434343;
}
.active {
// color: #f65959;
}
.active::after {
content: '';
position: absolute;
width: 62%;
height: 5px;
bottom: 22px;
left: 50%;
border-radius: 8px;
background: #00ce69;
opacity: 0.8;
-webkit-transform: translate3d(-50%, 0, 0);
}
}
}

最终的效果: