微信小程序开发之实现选项卡(窗口顶部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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
JS实现点星星消除小游戏
Mar 24 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解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php短址转换实现方法
2015/02/25 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
Python虚拟环境项目实例
2017/11/20 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
车间组长岗位职责
2013/12/20 职场文书
车辆安全检查制度
2014/01/12 职场文书
小学生作文评语
2014/04/18 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
科技馆观后感
2015/06/08 职场文书
工作报告范文
2019/06/20 职场文书