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


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 相关文章推荐
JavaScript 面向对象编程(1) 基础
May 18 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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代码
2008/04/09 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
Python的语言类型(详解)
2017/06/24 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
pandas 数据类型转换的实现
2020/12/29 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
兴趣小组活动总结
2014/05/05 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
民族学专业求职信
2014/07/28 职场文书
总经理检讨书
2014/09/15 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP
排查MySQL生产环境索引没有效果
2022/04/11 MySQL