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


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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
详解微信小程序之一键复制到剪切板
Apr 24 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
异步加载script的代码
2011/01/12 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python中无限元素列表的实现方法
2014/08/18 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python实现AES加密和解密
2019/03/27 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python实现上下文管理器的方法
2020/08/07 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
银行职员思想汇报
2013/12/31 职场文书
部队学习十八大感言
2014/01/11 职场文书
优质服务活动实施方案
2014/05/02 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
工厂标语大全
2014/10/06 职场文书
小学科学课教学反思
2016/02/23 职场文书
创业计划之特色精品店
2019/08/12 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python