微信小程序自定义标签实现多层标签嵌套功能

　　

小程序最近是越来越火了……

　　

做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧。

　　

项目中有个多标签嵌套的需求,进入程序主界面下面有两个选项卡,进入一个模块后,一个模块最底下又有多个选项卡,每个选项卡上又嵌了2 - 4个不等的标签…

　　

这种变态需求只能自定义标签了。

　　

其实如果项目不是很复杂,没有多标签嵌套的需求,完全可以用小程序官方的tabBar,方便快捷。
　　官方tabBar地址:https://developers.weixin.qq...。

　　

　　

先看效果图吧

　　

微信小程序自定义标签实现多层标签嵌套功能

　　

微信小程序自定义标签实现多层标签嵌套功能

　　

结构是这样的:程序主界面包含两个选项卡:主页和我的,主页又包含两个选项卡:最热和最新;我的也包含两个选项卡:电影和音乐。
　　

　　

关系图如下:

　　
　　

项目
　　,,主页
　　,,,,,,最热
　　,,,,,,最新
　　,,我的
　　,,,,,,电影
　　,,,,,,音乐

　　 　　

　　

再看代码结构

　　

微信小程序自定义标签实现多层标签嵌套功能

　　

两种页面结构
　　

　　

小程序的页面分为两种:页面和组件。
　　

　　

页面就是普通的页面,组件是小程序为实现模块化而提供的自定义组件。

　　

<强>相同点:
　　

　　

都由四个文件:. js, . json, .wxml, .wxss,构成,.wxml, .wxss写法完全相同。

　　

<强>不同点:

　　

组件要在json文件中注明:“组件”:真正的
　　

　　 　　 　　{ 　　“组件”:没错, 　　" usingComponents ": { 　　“电影”:“电影/电影”, 　　“音乐”:“音乐/音乐” 　　} 　　} 　　 　　

js文件的结构和生命周期函数不同
　　

　　

下面是自动生成的页面和组件代码,可以感受下

　　

页面的js代码

　　 　　 　　页面({/* * 　　*页面的初始数据 　　*/数据:{ 　　},/* * 　　*生命周期函数——监听页面加载 　　*/> 　　{ 　　" usingComponents ": { 　　“家”:“。//家”, 　　“我”:“。/我/我的” 　　} 　　} 　　 　　

现在,就可以在myapp。wxml文件中愉快的引用了

　　 　　 　　& lt;视图类=叭萜鳌北? 　　& lt;视图类=澳谌荨痹? 　　& lt;查看天气:如果={{currentTab==0}}的祝辞 　　& lt;家居/比; 　　& lt;/view> 　　& lt;查看天气:如果={{currentTab==1}}的祝辞 　　& lt;我/在 　　& lt;/view> 　　& lt;/view> 　　& lt; !——下面的两个选项卡——比; 　　& lt;视图类=bottom-tab的祝辞 　　& lt;视图类=' tab-item {{currentTab==0 & # 63;“活跃”:“}}'数据流=" 0 " bindtap=' switchTab的祝辞 　　& lt;图像src=' https://www.yisu.com/zixun/{{currentTab==0 ?“. ./. ./资产/home_active。png”:“. ./. ./资产/home。png "}}”class=癷tem-img”祝辞& lt;/image> 　　& lt;文本类=' item-text '在主页& lt;/text> 　　& lt;/view> 　　 　　& lt;视图类=' tab-item {{currentTab==1 & # 63;“活跃”:“}}'数据流=?”bindtap=' switchTab的祝辞 　　& lt;图像src=' https://www.yisu.com/zixun/{{currentTab==1 ?“. ./. ./资产/mine_active。png”:“. ./. ./资产/我的。png "}}”class=癷tem-img”祝辞& lt;/image> 　　& lt;文本类=' item-text '在我的& lt;/text> 　　& lt;/view> 　　& lt;/view> 　　& lt;/view> 　　 　　

选项卡切换的原理是根据天气:如果或隐藏者来控制视图的显示和隐藏,页面的数据中设置一个变量currentTab来记录当前点击的是哪个选项卡,每次点击的时候更新currentTab的值。

　　

切换标签的方法:

　　 　　 　　switchTab (e) { 　　这一点。setData ({currentTab: e.currentTarget.dataset。当前}); 　　} 　　 　　

这里有几个需要注意的点:

　　

这里判断相等用了==而不是===,因为通过e.currentTarget.dataset。目前取到的值是字符串类型的,也就是给数据设置的值是字符串的0和1,如果用===就会判断出错。当然也可以强转成数字类型的,我比较懒~

　　

控制组件显示隐藏可以用天气:如果也可以用隐藏的。两者是区别是如果用天气:如果每次切换标签的时候组件都会重新渲染,生命周期方法会重新调用执行。而用隐藏的则不会重新渲染,生命周期函数也不会重新调用。

微信小程序自定义标签实现多层标签嵌套功能