作者：ruicoding，來自原文地址 
之前Android開發(fā)時，頂部導航用到viewPage,微信小程序里想要達到同樣的效果，可用swiper來實現(xiàn)；

先看效果圖

上代碼： 
1.swiperTab.js

1. Page({
2. data: {
3. // tab切換
4. currentTab: 0,
5. },
6. swichNav: function (e) {
7. console.log(e);
8. var that = this;
9. if (this.data.currentTab === e.target.dataset.current) {
10. return false;
11. } else {
12. that.setData({
13. currentTab: e.target.dataset.current,
14. })
15. }
16. },
17. swiperChange: function (e) {
18. console.log(e);
19. this.setData({
20. currentTab: e.detail.current,
21. })
22.  
23. },
24. onLoad: function (options) {
25. // 生命周期函數(shù)--監(jiān)聽頁面加載
26. },
27. onReady: function () {
28. // 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
29. },
30. onShow: function () {
31. // 生命周期函數(shù)--監(jiān)聽頁面顯示
32. },
33. onHide: function () {
34. // 生命周期函數(shù)--監(jiān)聽頁面隱藏
35. },
36. onUnload: function () {
37. // 生命周期函數(shù)--監(jiān)聽頁面卸載
38. },
39. onPullDownRefresh: function () {
40. // 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
41. },
42. onReachBottom: function () {
43. // 頁面上拉觸底事件的處理函數(shù)
44. },
45. onShareAppMessage: function () {
46. // 用戶點擊右上角分享
47. return {
48. title: 'title', // 分享標題
49. desc: 'desc', // 分享描述
50. path: 'path' // 分享路徑
51. }
52. }
53. })

2.swiperTab.wxml

1. <view class="page">
2.  
3. <!--頂部導航欄-->
4. <view class="swiper-tab">
5. <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1</view>
6. <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2</view>
7. <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Tab3</view>
8. </view>
9.  
10. <!--內容主體-->
11. <swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
12. <swiper-item>
13. <view>我是tab1</view>
14. </swiper-item>
15. <swiper-item>
16. <view>我是tab2</view>
17. </swiper-item>
18. <swiper-item>
19. <view>我是tab3</view>
20. </swiper-item>
21. </swiper>
22. </view>

3.swiperTab.wxss

1. .page {
2. margin-left: 10rpx;
3. margin-right: 10rpx;
4. }
5.  
6. .swiper-tab {
7. display: flex;
8. flex-direction: row;
9. line-height: 80rpx;
10. border-bottom: 2rpx solid #777;
11. }
12.  
13. .tab-item {
14. width: 33.3%;
15. text-align: center;
16. font-size: 15px;
17. color: #777;
18. }
19.  
20. .swiper {
21. height: 1100px;
22. background: #dfdfdf;
23. }
24.  
25. .on {
26. color: blue;
27. border-bottom: 5rpx solid blue;
28. }