微信小程序 实现tabs选项卡效果实例代码


Posted in Javascript onOctober 31, 2016

最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了。很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下。思路如下:

1、首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类

2、选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块

3、使用三目运算通过点击获取导航索引,根据索引判断是否添加当前类【备注,这里我将点击事件绑定在父级导航栏,通过target对象得到点击触发的事件对象属性】

请结合如下效果图:

微信小程序 实现tabs选项卡效果实例代码

      接下来直接查看源码:

demo.wxml:

<view class="tab"> 
 <view class="tab-left" bindtap="tabFun"> 
  <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view> 
  <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view> 
  <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view> 
  <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view> 
 </view> 
 
 <view class="tab-right"> 
  <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view> 
  <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view> 
  <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view> 
  <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view> 
 </view> 
</view>

demo.js:

Page( { 
 data: { 
  tabArr: { 
   curHdIndex: 0, 
   curBdIndex: 0 
  }, 
 }, 
 tabFun: function(e){ 
  //获取触发事件组件的dataset属性 
  var _datasetId=e.target.dataset.id; 
  console.log("----"+_datasetId+"----"); 
  var _obj={}; 
  _obj.curHdIndex=_datasetId; 
  _obj.curBdIndex=_datasetId; 
  this.setData({ 
   tabArr: _obj 
  }); 
 }, 
 onLoad: function( options ) { 
  alert( "------" ); 
 } 
});

demo.wxss:

.tab{ 
  display: flex; 
  flex-direction: row; 
} 
.tab-left{ 
  width: 200rpx; 
  line-height: 160%; 
  border-right: solid 1px gray; 
} 
.tab-left view{ 
  border-bottom: solid 1px red; 
} 
.tab-left .active{ 
  color: #f00; 
} 
.tab-right{ 
  line-height: 160%; 
} 
.tab-right .right-item{ 
  padding-left: 15rpx; 
  display: none; 
} 
.tab-right .right-item.active{ 
  display: block; 
}

    最终演示效果如下:

 微信小程序 实现tabs选项卡效果实例代码

微信小程序 实现tabs选项卡效果实例代码

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 #Javascript
jQuery绑定事件的四种方式介绍
Oct 31 #Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 #Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 #Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 #Javascript
js学习笔记之事件处理模型
Oct 31 #Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 #Javascript
You might like
php smarty函数扩展
2010/03/15 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
后勤采购员岗位职责
2013/12/19 职场文书
服装采购员岗位职责
2014/03/15 职场文书
拉拉队口号
2014/06/16 职场文书
社区志愿者活动方案
2014/08/18 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js