微信小程序实现选项卡功能
更新时间：2020年06月19日 15:01:07 作者：西江无月
这篇文章主要为大家详细介绍了微信小程序实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序选项卡功能展示的具体代码，供大家参考，具体内容如下
首先看看微信小程序上的选项卡的效果：
原理呢，就是先布局好（这就不必说了吧），然后在上面的每一个选项卡上都定义一个同样的点击事件，然后给每一个组件上绑定一个唯一的标识符，然后点击事件触发的时候，获取到绑定的标识符，判断当前点击的是哪个选项卡，然后再判断下面该显示哪一块，现在上代码：
wxml:
<view class="menu_box">
<text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text>
<text class='menu2 {{menuTapCurrent=="1"?"borders":""}}' data-current="1" catchtap="menuTap">menu2</text>
</view>
<view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view>
<view class="tab2" hidden="{{menuTapCurrent!='1'}}">tab2</view>
wxss:
.menu_box{
display: flex;
height: 80rpx;
}
.menu1,.menu2{
flex: 1;
font-size:30rpx;
line-height: 80rpx;
text-align: center;
}
.borders{
border-bottom: 4rpx solid #f00;
color: #f00;
}
.tab1,.tab2{
height: 300rpx;
background: #23bff3;
}
.tab2{
background: #ccc;
}
JS:
menuTap:function(e){
var current=e.currentTarget.dataset.current;//获取到绑定的数据
//改变menuTapCurrent的值为当前选中的menu所绑定的数据
this.setData({
menuTapCurrent:current
});
},
完结。
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
我们不管js或iframe怎么调用的，模拟点击就意味着打开广告链接，广告商就以为用户点击了他的广告，所以我们只要保证点击了一个链接但没有跳出页面的结果就行了，是吗？2010-01-01
这篇文章主要介绍了javascript跨域请求包装函数与用法,结合实例形式分析了javascript基于ajax的跨域请求封装函数与相关使用技巧,需要的朋友可以参考下2016-11-11
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
这篇文章主要介绍了关于微信小程序获取小程序码并接受buffer流保存为图片的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧<BR>2019-06-06
自己刚写的一个小程序，写得满一般的，不过这个接口还成，感兴趣的朋友可以参考下哈，希望对你学习js知识有所帮助2013-04-04
本文给大家分享javascript封装一个tab效果源码分享，感兴趣的朋友一起来看看吧2015-09-09
js中arguments,caller,callee,apply的用法小结
本篇文章只要是对js中arguments,caller,callee,apply的用法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
js中base64、url和blob之间相互转换的3种方式(详细代码)
这篇文章主要给大家介绍了关于js中base64、url和blob之间相互转换的3种方式,Blob和File是用来表示二进制数据的,而Base64则是一种编码方式,用来把二进制数据编码成可读的字符串,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏，在另一个页面出现目前点击收藏的项目。需要的朋友可以参考下2018-06-06
最近写一个关于用JavaScript做图片自动切换问题发现一个非常奇特的问题，除了空格和换行外完全相同的代码，在Firefox下却有截然不同的运行结果，今天记录以提供他人留意及自我备查。2010-11-11
JavaScript Base64编码和解码，实现URL参数传递。
JavaScript Base64编码和解码，实现URL参数传递。...2006-09-09
最新评论