在開發微信小程式的時候，會遇到選項卡切換，這裡有一個小例子，可以做為參考，程式碼如下

結構部分:

<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">熱點</view> <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">體育</view> <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">社會</view> </view>
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"> <swiper-item><view>熱點</view></swiper-item> <swiper-item><view>體育</view></swiper-item> <swiper-item><view>社會</view></swiper-item> </swiper> JS部分 var app = getApp() Page({ data: { currentTab: 0 }, onLoad: function (options) { // 頁面初始化 options為頁面跳轉所帶來的引數
}, //滑動切換 swiperTab: function (e) { var that = this; that.setData({ currentTba: e.detail.current }); }, //點選切換 clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } }
}) 樣式部分 .swiper-tab{ width: 100%; border-bottom: 2rpx solid #ccc; text-align: center; height: 88rpx; line-height: 88rpx; font-weight: bold; } .swiper-tab-item{ display: inline-block; width: 33.33%; color:red; } .active{ color:aqua; border-bottom: 4rpx solid red; }