微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换


Posted in Javascript onNovember 25, 2016

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.

总算做出来了.分享出来看看.

先看效果:
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

再上代码:

1.index.wxml

<!--index.wxml--> 
<view class="swiper-tab"> 
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view> 
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view> 
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</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>

2.indexwxss

/**indexwxss**/ 
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: 33%; 
  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; 
}

3.index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page( { 
 data: { 
  /** 
    * 页面配置 
    */ 
  winWidth: 0, 
  winHeight: 0, 
  // tab切换 
  currentTab: 0, 
 }, 
 onLoad: function() { 
  var that = this; 
 
  /** 
   * 获取系统信息 
   */ 
  wxgetSystemInfo( { 
 
   success: function( res ) { 
    thatsetData( { 
     winWidth: reswindowWidth, 
     winHeight: reswindowHeight 
    }); 
   } 
 
  }); 
 }, 
 /** 
   * 滑动切换tab 
   */ 
 bindChange: function( e ) { 
 
  var that = this; 
  thatsetData( { currentTab: edetailcurrent }); 
 
 }, 
 /** 
  * 点击tab切换 
  */ 
 swichNav: function( e ) { 
 
  var that = this; 
 
  if( thisdatacurrentTab === etargetdatasetcurrent ) { 
   return false; 
  } else { 
   thatsetData( { 
    currentTab: etargetdatasetcurrent 
   }) 
  } 
 } 
})

这样一个类似viewpage的顶部选项卡就出来了.

Javascript 相关文章推荐
document节点对象的获取方式示例介绍
Dec 24 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 #Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 #Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 #Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 #Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 #Javascript
使用JS读取XML文件的方法
Nov 25 #Javascript
JS比较两个数值的大小实例
Nov 25 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python Flask-web表单使用详解
2017/11/18 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python判断链表是否有环的实例代码
2020/01/31 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
小学生红领巾广播稿
2014/01/21 职场文书
中介业务员岗位职责
2014/04/09 职场文书
村委会换届选举方案
2014/05/03 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
运动会表扬稿
2015/01/16 职场文书
部队2015年终工作总结
2015/04/02 职场文书
公司文体活动总结
2015/05/07 职场文书
少年犯观后感
2015/06/11 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL