微信小程序开发之实现选项卡(窗口顶部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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
简单实现node.js图片上传
Dec 18 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
vue 如何使用递归组件
Oct 23 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实现session自定义会话处理器的方法
2015/01/27 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
python抓取网页内容示例分享
2014/02/24 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python实现Restful API的例子
2019/08/31 Python
Python中的全局变量如何理解
2020/06/04 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
2014年大学生自我评价
2014/01/19 职场文书
安全标准化实施方案
2014/02/20 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
写给领导的感谢信
2015/01/22 职场文书
商务司机岗位职责
2015/04/10 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书