选项卡浏览是 internet explorer 中的一项功能,该功能可让您在一个浏览器窗口中打开多个网站。可以在新选项卡中打开网页,并通过单击要查看的选项卡切换这些网页。通过使用选项卡浏览,可以潜在地减少任务栏上显示的项目数量。本文我们就为大家分享微信小程序实现选项卡功能。
首先看看微信小程序上的选项卡的效果:

原理呢,就是先布局好(这就不必说了吧),然后在上面的每一个选项卡上都定义一个同样的点击事件,然后给每一个组件上绑定一个唯一的标识符,然后点击事件触发的时候,获取到绑定的标识符,判断当前点击的是哪个选项卡,然后再判断下面该显示哪一块,现在上代码:
wxml:
1 2 3 4 5 6 | < 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .menu_box{
display : flex;
height : 80 rpx;
}
.menu 1 ,.menu 2 {
flex: 1 ;
font-size : 30 rpx;
line-height : 80 rpx;
text-align : center ;
}
.borders{
border-bottom : 4 rpx solid #f00 ;
color : #f00 ;
}
.tab 1 ,.tab 2 {
height : 300 rpx;
background : #23bff3 ;
}
.tab 2 {
background : #ccc ;
}
|
JS:
1 2 3 4 5 6 7 8 9 | menuTap: function (e){
var current=e.currentTarget.dataset.current;
this .setData({
menuTapCurrent:current
});
},
|
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。