快速掌握微信小程序 tab 切换的实现技巧（可滑动切换）_微信小程序tab标签页

前言

微信小程序中的 tab 切换功能可以说是用户所需的一个基础功能。本文将介绍如何通过微信小程序实现 tab 切换功能，为用户带来更为便捷和高效的小程序体验。

---

实现思路

其实这个小功能的实现非常简单，只需要通过一个标识控制选项的样式及显示的内容，当我们触发点击或者滑动事件时动态的改变标识的值即可。话不多说，下面直接上实例代码。

---

效果1：

---

wxml 文件

<view>
    <!-- Tab布局 -->
    <view class="navBox">
        <view class="titleBox" wx:for="{{tabList}}" bindtap="tabsOn" data-idx="{{item.index}}">
            <text class="{{item.index == tabsId ? 'fontColorBox' : ''}}">{{item.title}}</text>
            <hr class="{{item.index == tabsId ? 'lineBox' : ''}}" />
        </view>
    </view>
    <!-- 内容布局 -->
    <swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>
        <!-- circular 启用循环滑动 -->
        <swiper-item>
            <view>装备内容</view>
        </swiper-item>
        <swiper-item>
            <view>活动内容</view>
        </swiper-item>
        <swiper-item>
            <view>功能内容</view>
        </swiper-item>
    </swiper>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

---

js文件

Page({
    data: {
        // tab选项
        tabList: [
            {title: "装备",index: "0",},
            {title: "运动",index: "1",},
            {title: "功能",index: "2",}
        ],
        tabsId: 0, //默认选型为装备
    },
    // 滑动时触发的事件
    slideOn(e) {
        // 拿到当前索引并动态改变
        this.setData({
            tabsId: e.detail.current
        })
    },

    //点击tab时触发
    tabsOn(e) {
        this.setData({
            //拿到当前索引并动态改变
            tabsId: e.currentTarget.dataset.idx
        })
    },
})
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

---

wxss 文件

.navBox {
  /* tab整体样式 */
  height: 100rpx;
  padding: 0px 20%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 18rpx solid rgb(243, 244, 249);
}

.fontColorBox {
  /* 选中tab样式 */
  color: black;
  font-weight: bold;
}

.titleBox {
  /* 未选中tab样式 */
  color: rgb(168, 170, 175);
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lineBox {
  /* 线条样式 */
  width: 32rpx;
  height: 8rpx;
  background: black;
  margin-top: 10rpx;
  border-radius: 4rpx;
}

.swiperTtemBox {
  /* 内容样式 */
  padding: 16rpx;
  font-size: 28rpx;
  height: calc(100vh - 150rpx);
}
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
40

---

效果2：

---

wxml 文件

<view class="tabBox">
    <!-- Tab布局 -->
    <view class="navBox">
        <view class="titleBox" wx:for="{{tabList}}" bindtap="tabsOn" data-idx="{{item.index}}">
            <text class="{{item.index == tabsId ? 'fontColorBox' : ''}}">{{item.title}}</text>
        </view>
    </view>
    <!-- 内容布局 -->
    <swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>
        <!-- circular 启用循环滑动 -->
        <swiper-item>
            <view>装备内容</view>
        </swiper-item>
        <swiper-item>
            <view>活动内容</view>
        </swiper-item>
        <swiper-item>
            <view>功能内容</view>
        </swiper-item>
    </swiper>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---

wxss 文件

.tabBox {
    padding: 20rpx;
}

.navBox {
    /* tab整体样式 */
    height: 74rpx;
    display: flex;
    padding: 1.5% 1.5%;
    border-radius: 50rpx;
    background: #E5EEFD;
}

.fontColorBox,
.titleBox {
    /* 共同样式 */
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fontColorBox {
    /* 选中tab样式 */
    color: #fff;
    font-weight: bold;
    background: linear-gradient(151deg, #2F7EFC 0%, #7BADFC 100%);
    border-radius: 50rpx;
}

.titleBox {
    /* 未选中tab样式 */
    color: #1A1A1A;
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.swiperTtemBox {
    /* 内容样式 */
    padding: 16rpx;
    font-size: 28rpx;
    height: calc(100vh - 150rpx);
}
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
40
41
42
43
44
45
46