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


Posted in Javascript onMarch 30, 2017

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

实例代码:

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

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

Javascript 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
JS实现购物车基本功能
Nov 08 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 #Javascript
vue分类筛选filter方法简单实例
Mar 30 #Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 #Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 #Javascript
canvas绘制一个常用的emoji表情
Mar 30 #Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 #Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 #Javascript
You might like
PHP使用CURL模拟登录的方法
2015/07/08 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
深入浅析vue组件间事件传递
2017/12/29 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
python实现单链表的方法示例
2019/09/03 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
会计助理的岗位职责
2013/11/29 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
《狼》教学反思
2014/03/02 职场文书
搞笑征婚广告词
2014/03/17 职场文书
股东协议书
2014/04/14 职场文书
中专生自荐信
2014/06/25 职场文书
西柏坡导游词
2015/02/05 职场文书
书法社团活动总结
2015/05/07 职场文书
聘任合同书
2015/09/21 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js