微信小程序开发之实现选项卡(窗口顶部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 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
深入Vue-Router路由嵌套理解
Aug 13 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
JS实现简易图片自动轮播
Oct 16 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中文件上传的安全问题
2006/10/09 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP echo()函数讲解
2019/02/15 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python删除过期文件的方法
2015/05/29 Python
python:socket传输大文件示例
2017/01/18 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python tkinter实现连连看游戏
2020/11/16 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
河童之夏观后感
2015/06/11 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers