微信开发 js实现tabs选项卡效果


Posted in Javascript onOctober 28, 2016

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

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

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

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

请结合如下效果图:

微信开发 js实现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; 
}

最终演示效果如下:

微信开发 js实现tabs选项卡效果

以上仅是个人方案,如果有更好的方案,欢迎提出~

本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 #Javascript
Easyui的组合框的取值与赋值
Oct 28 #Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 #Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 #Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 #Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 #Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP新手上路(十三)
2006/10/09 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
Vue中全局变量的定义和使用
2019/06/05 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python回调函数用法实例详解
2015/07/02 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
5款非常棒的Python工具
2018/01/05 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
使用Python发现隐藏的wifi
2020/03/04 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
竞选班长演讲稿
2013/12/30 职场文书
师德师风演讲稿
2014/05/05 职场文书
颐和园的导游词
2015/01/30 职场文书
归元寺导游词
2015/02/06 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
教师听课学习心得体会
2016/01/15 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书