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

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

实例代码：

<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' 
  } 
 } 
})  

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序  # 顶部导航栏  # 小程序  # 微信小程序教程系列之设置标题栏和导航栏(7)  # 微信小程序 开发之顶部导航栏实例代码  # 详解微信小程序设置底部导航栏目方法  # 微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题  # 微信小程序顶部导航栏滑动tab效果  # 详解微信小程序胶囊按钮返回|首页自定义导航栏功能  # 微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）  # 微信小程序实战之顶部导航栏(选项卡)(1)  # 微信小程序实现左侧滑动导航栏  # 微信小程序实现左侧导航栏  # 我是  # 希望能  # 谢谢大家  # height  # winHeight  # px  # style  # box  # duration  # bottom  # border  # rpx  # solid  # bindChange 

相关文章： 网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  网站设计制作公司地址,网站建设比较好的公司都有哪些？  c# 在高并发下使用反射发射（Reflection.Emit）的性能  C#怎么使用委托和事件 C# delegate与event编程方法  高端建站如何打造兼具美学与转化的品牌官网？  宝塔新建站点报错如何解决？  网站制作服务平台,有什么网站可以发布本地服务信息？  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  深圳网站制作的公司有哪些,dido官方网站？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  利用JavaScript实现拖拽改变元素大小  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  ,巨量百应是干嘛的？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  如何在Golang中引入测试模块_Golang测试包导入与使用实践  制作营销网站公司,淘特是干什么用的？  建站主机助手选型指南：2025年热门推荐与高效部署技巧  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  如何在建站之星网店版论坛获取技术支持？  武清网站制作公司,天津武清个人营业执照注销查询系统网站？  如何在IIS中新建站点并配置端口与物理路径？  如何通过二级域名建站提升品牌影响力？  如何通过VPS建站实现广告与增值服务盈利？  香港服务器部署网站为何提示未备案？  建站之星在线客服如何快速接入解答？  建站主机如何选？高性价比方案全解析  宝塔建站教程：一键部署配置流程与SEO优化实战指南  寿县云建站：智能SEO优化与多行业模板快速上线指南  如何在阿里云部署织梦网站？  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  建站主机是否属于云主机类型？  南京网站制作费用,南京远驱官方网站？  怎么将XML数据可视化 D3.js加载XML  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么？  c++ stringstream用法详解_c++字符串与数字转换利器  建站主机与服务器功能差异如何区分？  如何在Ubuntu系统下快速搭建WordPress个人网站？  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  如何生成腾讯云建站专用兑换码？  公司网站制作价格怎么算,公司办个官网需要多少钱？  如何选择建站程序？包含哪些必备功能与类型？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  家庭服务器如何搭建个人网站？  如何确认建站备案号应放置的具体位置？  网站制作的软件有哪些,制作微信公众号除了秀米还有哪些比较好用的平台？  建站之星如何保障用户数据免受黑客入侵？  如何在IIS7上新建站点并设置安全权限？  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？