微信小程序开发之实现选项卡(窗口顶部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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
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
xml+php动态载入与分页
2006/10/09 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
运动会解说词200字
2014/02/06 职场文书
合作协议书
2014/04/23 职场文书
村委会换届选举方案
2014/05/03 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
阿里云日志过滤器配置日志服务
2022/04/09 Servers