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

这篇文章主要介绍了微信小程序中顶部导航栏的实现代码的相关资料,需要的朋友可以参考下

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

实例代码：

 view >
.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: #39;装逼小程序 #39;, 
 path: #39;/page/user?id=123 #39; 
})
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
微信小程序中tabBar底部导航的介绍

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


以上就是关于微信小程序中顶部导航栏的实现的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！