前言

微信小程序中的 tab 切換功能可以說是用戶所需的一個基礎(chǔ)功能。本文將介紹如何通過微信小程序?qū)崿F(xiàn) tab 切換功能，為用戶帶來更為便捷和高效的小程序體驗(yàn)。

實(shí)現(xiàn)思路

其實(shí)這個小功能的實(shí)現(xiàn)非常簡單，只需要通過一個標(biāo)識控制選項(xiàng)的樣式及顯示的內(nèi)容，當(dāng)我們觸發(fā)點(diǎn)擊或者滑動事件時動態(tài)的改變標(biāo)識的值即可。話不多說，下面直接上實(shí)例代碼。

效果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>
    <!-- 內(nèi)容布局 -->
    <swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>
        <!-- circular 啟用循環(huán)滑動 -->
        <swiper-item>
            <view>裝備內(nèi)容</view>
        </swiper-item>
        <swiper-item>
            <view>活動內(nèi)容</view>
        </swiper-item>
        <swiper-item>
            <view>功能內(nèi)容</view>
        </swiper-item>
    </swiper>
</view>

js文件

Page({
    data: {
        // tab選項(xiàng)
        tabList: [
            {title: "裝備",index: "0",},
            {title: "運(yùn)動",index: "1",},
            {title: "功能",index: "2",}
        ],
        tabsId: 0, //默認(rèn)選型為裝備
    },
    // 滑動時觸發(fā)的事件
    slideOn(e) {
        // 拿到當(dāng)前索引并動態(tài)改變
        this.setData({
            tabsId: e.detail.current
        })
    },

    //點(diǎn)擊tab時觸發(fā)
    tabsOn(e) {
        this.setData({
            //拿到當(dāng)前索引并動態(tài)改變
            tabsId: e.currentTarget.dataset.idx
        })
    },
})

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 {
  /* 內(nèi)容樣式 */
  padding: 16rpx;
  font-size: 28rpx;
  height: calc(100vh - 150rpx);
}

效果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>
    <!-- 內(nèi)容布局 -->
    <swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>
        <!-- circular 啟用循環(huán)滑動 -->
        <swiper-item>
            <view>裝備內(nèi)容</view>
        </swiper-item>
        <swiper-item>
            <view>活動內(nèi)容</view>
        </swiper-item>
        <swiper-item>
            <view>功能內(nèi)容</view>
        </swiper-item>
    </swiper>
</view>

wxss 文件文章來源地址http://www.zghlxwxcb.cn/news/detail-503388.html

.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 {
    /* 內(nèi)容樣式 */
    padding: 16rpx;
    font-size: 28rpx;
    height: calc(100vh - 150rpx);
}

到了這里，關(guān)于快速掌握微信小程序 tab 切換的實(shí)現(xiàn)技巧（可滑動切換）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！