微信小程序中顶部导航栏的实现代码_网络技术

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

发布时间 - 2026-01-11 00:27:06 点击率：次

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

实例代码：

<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

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：血焰突袭！安帕赫的狂刃近战爆发攻略

下一篇：Linux服务怎么管理_Linux服务管理与systemct

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：血焰突袭！安帕赫的狂刃近战爆发攻略

下一篇：Linux服务怎么管理_Linux服务管理与systemct