微信小程序 实现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 相关文章推荐
深入理解javascript动态插入技术
Nov 12 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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运行速度的一些小技巧分享
2012/07/03 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
Move.js入门
2017/02/08 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
讲解python参数和作用域的使用
2013/11/01 Python
Python语言描述最大连续子序列和
2017/12/05 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
饮料业务员岗位职责
2013/12/15 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
科研先进个人典型材料
2014/01/31 职场文书
汉语言文学职业规划
2014/02/14 职场文书
阳光体育活动方案
2014/02/16 职场文书
预备党员个人总结
2015/02/14 职场文书
综合办公室岗位职责
2015/04/11 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers
TS 类型收窄教程示例详解
2022/09/23 Javascript