微信开发 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 相关文章推荐
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
原生JavaScript实现换肤
Feb 19 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
jquery批量控制form禁用的代码
2013/08/06 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
超市端午节活动方案
2014/01/23 职场文书
英文留学推荐信范文
2014/01/25 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
作风转变年心得体会
2014/10/22 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
党校党性分析材料
2014/12/19 职场文书
2015年推普周活动方案
2015/05/06 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python