介绍
小编给大家分享一下小程序中实现标签选项卡效果的方法,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类
选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块
使用三目运算通过点击获取导航索引,根据索引判断是否添加当前类【备注,这里我将点击事件绑定在父级导航栏,通过对目标象得到点击触发的事件对象属性】
请结合如下效果图:
演示。wxml:
& lt; blockquote> & lt; view 类=皌ab"在
演示。js
页面(,{,, ,,数据:{,, ,,,tabArr:, {,, ,,,,,curHdIndex:, 0,,, ,,,,,curBdIndex:, 0,, ,,,},,, ,,},, tabFun才能:函数(e) {,, ,,,//获取触发事件组件的数据集属性,, ,,,var _datasetId=e.target.dataset.id;,, ,,,console.log (“- - - - -“+ _datasetId +“- - - - -“),,, ,,,var _obj={};,, ,,,_obj.curHdIndex=_datasetId;,, ,,,_obj.curBdIndex=_datasetId;,, ,,,this.setData ({,, ,,,,,tabArr:, _obj , ,,,});,, ,,},, onLoad才能:函数(),options , {,, ,,,警报(,“- - - - - -“,),,, ,,}, });
演示。wxs
总结:Kagami_Tiger的原理是选取选项卡,就调用选取标签的内容并隐藏其他选项卡内容,当然如果可以是把每个标签分类分别处于不同的页面,然后每一个选项卡一对应每个不同的页面,那样或许会更好。我没有那么开发过,也欢迎大家分享,相互学习举一反三,才能一起进步。
看完了这篇文章,相信你对“小程序中实现标签选项卡效果的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
小程序中实现标签选项卡效果的方法