微信开发 js实现tabs选项卡效果
更新时间：2016年10月28日 14:09:46 作者：Kagami_Tiger
这篇文章主要介绍了微信开发的学习笔记，js实现tabs选项卡效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近微信应用号是炒的如火如荼，热门满满，但是也可以发现搜索关键词出来，各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮，这几天先把小程序技术文档看了个遍，就直接着手写案例了。很多组件微信内部已经封装完了，正好发现没有tab选项卡效果，这两天正好研究了下。思路如下：
1、首先点击导航的时候需要两个变量，一个存储当前点击样式类，一个是其它导航默认的样式类
2、选项卡内容列表同样也需要两个变量，一个存储当前显示块，一个存储的是其它隐藏的默认块
3、使用三目运算通过点击获取导航索引，根据索引判断是否添加当前类【备注，这里我将点击事件绑定在父级导航栏，通过target对象得到点击触发的事件对象属性】
请结合如下效果图：
接下来直接查看源码：
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;
}
最终演示效果如下：
以上仅是个人方案，如果有更好的方案，欢迎提出~
本文已被整理到了《JavaScript微信开发技巧汇总》，欢迎大家学习阅读。
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js字符串处理之绝妙的代码，包括字符串去重、将字符放在对象中遍历拼接出字符串、把字符串的奇数位和偶数位分别提取到两个数组中、将两个数组按奇数位和偶数位插入拼接为字符串，有时候需要对字符进行处理的时候可以用得到2019-04-04
本篇文章主要介绍了JS敏感词过滤实例，详细的介绍了两种方法，RegExp（），replace（），具有一定的参考价值，有兴趣的可以了解一下。2016-12-12![JavaScript 应用技巧集合[推荐]](//img.jbzj.com/images/xgimg/bcimg2.png)
前段时间我曾经对JavaScript中的应用技巧进行了收集和总结这里我将会对这些应用技巧进行集中描述，如果你觉得遗漏了一些好用的应用技巧，也请在留言中提出，我会及时更新到这篇文章中的。2009-08-08
这篇文章主要介绍了ES6 迭代器与可迭代对象的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
微信小程序目前的火热程度相信不用多言，最近利用空余时间用小程序实现了个动态的登录页效果，所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
本文通过实例代码给大家介绍了JS使用tween.js动画库实现轮播图并且有切换功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
脚本安需导入(装载)的三种模式的对比...2007-06-06
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
这篇文章主要是对JavaScript中的常见问题解决方法(乱码,IE缓存,代理)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所 帮助2013-11-11
这篇文章主要介绍了js实现select下拉框菜单的详细代码，感兴趣的小伙伴们可以参考一下2015-12-12
最近项目有代码高亮的需求,这边是选用Prism.js来进行代码高亮,Prism是一款轻量级、可扩展的语法高亮器,根据现代 Web 标准构建,应用广泛,这篇文章主要给大家介绍了关于前端语法高亮插件Prism.js使用详细教程的相关资料,需要的朋友可以参考下2024-05-05
![JavaScript 应用技巧集合[推荐]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论