微信小程序开发之实现选项卡(窗口顶部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 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
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
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
virtualenv介绍及简明教程
2020/06/23 Python
电大物流学生的自我评价
2013/10/25 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
简历自我评价模板
2015/03/11 职场文书
办公室岗位职责范本
2015/04/11 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
2016春节放假通知范文
2015/08/18 职场文书
企业法人任命书
2015/09/21 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书