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


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中的一些注意事项 更新中
Dec 06 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
js中url对象化管理分析
Dec 29 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 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反弹shell实现代码
2009/04/22 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Python操作csv文件实例详解
2017/07/31 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
解决python对齐错误的方法
2020/07/16 Python
python MD5加密的示例
2020/10/19 Python
工作的心得体会
2013/12/31 职场文书
工作经历证明书范文
2014/11/02 职场文书
春节慰问简报
2015/07/21 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android