关于微信小程序中顶部导航栏的实现

微信小程序中顶部导航栏的实现

实例代码：

<view class="swiper-tab">     <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view>     <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">22</view>     <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">33</view>    <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">44</view>    <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">55</view>      </view>      <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">     <!-- 我是哈哈 -->     <swiper-item>      <view>我是哈哈</view>     </swiper-item>     <!-- 我是呵呵 -->     <swiper-item>      <view>我是呵呵</view>     </swiper-item>     <!-- 我是嘿嘿 -->     <swiper-item>      <view>我是嘿嘿</view>     </swiper-item>     <swiper-item>      <view>我是嘿嘿</view>     </swiper-item>     <swiper-item>      <view>我是嘿嘿</view>     </swiper-item>   </swiper>

.swiper-tab{     width: 100%;     border-bottom: 2rpx solid #777777;     text-align: center;     line-height: 80rpx;    }   .swiper-tab-list{ font-size: 30rpx;     display: inline-block;     width: 20%;     color: #777777;   }   .on{ color: #da7c0c;     border-bottom: 5rpx solid #da7c0c;}   .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }   .swiper-box view{     text-align: center;   }

var app = getApp()   Page( {    data: {     /**      * 页面配置      */     winWidth: 0,     winHeight: 0,     // tab切换     currentTab: 0,    },    onLoad: function() {     var that = this;        /**     * 获取系统信息     */     wx.getSystemInfo( {         success: function( res ) {       that.setData( {        winWidth: res.windowWidth,        winHeight: res.windowHeight       });      }        });    },    /**     * 滑动切换tab     */    bindChange: function( e ) {        var that = this;     that.setData( { currentTab: e.detail.current });       },    /**    * 点击tab切换    */    swichNav: function( e ) {        var that = this;        if( this.data.currentTab === e.target.dataset.current ) {      return false;     } else {      that.setData( {       currentTab: e.target.dataset.current      })     }     },   /**   * 点击分享   */   onShareAppMessage: function () {    return {     title: '装逼小程序',     path: '/page/user?id=123'    }   }  })

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序中tabBar底部导航的介绍

微信小程序实现城市列表的选择

以上就是关于微信小程序中顶部导航栏的实现的详细内容，更多内容请关注技术你好其它相关文章！