微信小程式實現頂部導航切換效果可用swiper來實現，效果如下：

程式碼如下：

WXML:

<view class="page">


<!--頂部導航欄-->

<view class="swiper-tab">

<view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1</view>

<view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2</view>

<view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Tab3</view>

</view>


<!--內容主體-->

<swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">

<swiper-item>

<view>我是tab1</view>

</swiper-item>

<swiper-item>

<view>我是tab2</view>

</swiper-item>

<swiper-item>

<view>我是tab3</view>

</swiper-item>

</swiper>

</view>

 

WXSS:

.page {

margin-left: 10rpx;

margin-right: 10rpx;

}


.swiper-tab {

display: flex;

flex-direction: row;

line-height: 80rpx;

border-bottom: 2rpx solid #777;

}


.tab-item {

width: 33.3%;

text-align: center;

font-size: 15px;

color: #777;

}


.swiper {

height: 1100px;

background: #dfdfdf;

}


.on {

color: blue;

border-bottom: 5rpx solid blue;

}

 

JS:

Page({

data: {

// tab切換

currentTab: 0,

},

swichNav: function (e) {

console.log(e);

var that = this;

if (this.data.currentTab === e.target.dataset.current) {

return false;

} else {

that.setData({

currentTab: e.target.dataset.current,

})

}

},

swiperChange: function (e) {

console.log(e);

this.setData({

currentTab: e.detail.current,

})


},

onLoad: function (options) {

// 生命週期函式--監聽頁面載入

},

onReady: function () {

// 生命週期函式--監聽頁面初次渲染完成

},

onShow: function () {

// 生命週期函式--監聽頁面顯示

},

onHide: function () {

// 生命週期函式--監聽頁面隱藏

},

onUnload: function () {

// 生命週期函式--監聽頁面解除安裝

},

onPullDownRefresh: function () {

// 頁面相關事件處理函式--監聽使用者下拉動作

},

onReachBottom: function () {

// 頁面上拉觸底事件的處理函式

},

onShareAppMessage: function () {

// 使用者點選右上角分享

return {

title: 'title', // 分享標題

desc: 'desc', // 分享描述

path: 'path' // 分享路徑

}

}

})