微信小程序开发 之 『顶部导航』特效

很好用的实例就转载了： 原文链接：http://blog.csdn.net/qq_26420489/article/details/62044526

之前Android开发时，顶部导航用到viewPage,微信小程序里想要达到同样的效果，可用swiper来实现；先看效果图

上代码：

1.swiperTab.js

[html]  view plain  copy

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.         // 生命周期函数--监听页面加载  
26.     },  
27.     onReady: function () {  
28.         // 生命周期函数--监听页面初次渲染完成  
29.     },  
30.     onShow: function () {  
31.         // 生命周期函数--监听页面显示  
32.     },  
33.     onHide: function () {  
34.         // 生命周期函数--监听页面隐藏  
35.     },  
36.     onUnload: function () {  
37.         // 生命周期函数--监听页面卸载  
38.     },  
39.     onPullDownRefresh: function () {  
40.         // 页面相关事件处理函数--监听用户下拉动作  
41.     },  
42.     onReachBottom: function () {  
43.         // 页面上拉触底事件的处理函数  
44.     },  
45.     onShareAppMessage: function () {  
46.         // 用户点击右上角分享  
47.         return {  
48.             title: 'title', // 分享标题  
49.             desc: 'desc', // 分享描述  
50.             path: 'path' // 分享路径  
51.         }  
52.     }  
53. })  

2. swiperTab .wxml

[html]  view plain  copy

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

[html]  view plain  copy

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. }