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

网友投稿 415 2023-01-29


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

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

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

项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab。。。

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

其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷。

官方 tabBar 地址:https://developers.weixin.qq....

一、Demo结构

先看效果图吧

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

关系图如下:

项目

    主页

        最热

        最新

    我的

        电影

        音乐

二、开始撸代码

再看代码结构

两种页面结构

小程序的页面分为两种:page 和 components。

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

相同点:

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

不同点:

components要在json文件中注明:"component": true

{

"component": true,

"usingComponents": {

"movie": "movie/movie",

"music": "music/music"

}

}

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

下面是自动生成的page和components代码,可以感受下

page 的 js 代码

Page({

/**

* 页面的初始数据

*/

data: {

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

component 的 js 代码

Component({

/**

* 组件的属性列表

*/

properties: {

},

/**

* 组件的初始数据

*/

data: {

},

/**

* 组件的方法列表

*/

methods: {

}

})

本例中每个 tab 都是一个小程序中定义的 component , 只有最外层包裹的 myapp 是 page,因为page中只能嵌入component,component中也可以嵌入component。

代码解析

先看myapp,这是程序的主界面。它包含了两个tab:home 和 mine,分别对应页面下方的 主页 和 我的。

要引入自定义组件需要在 myapp.json文件中声明:

{

"usingComponents":{

"home": "./home/home"http://,

"mine": "./mine/mine"

}

}

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

主页

我的

tab切换的原理是根据 wx:if 或者 hidden 来控制视图的显示和隐藏,页面的data中设置一个变量currentTab来记录当前点击的是哪个tab,每次点击的时候更新currentTab的值。

切换tab的方法:

switchTab(e) {

this.setData({ currentTab: e.currentTarget.dataset.current });

}

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

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

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

具体用哪个看业务需求了,贴一段官方的描述:

再看主页home,它本身是一个component,又包含了两个component :最热hot 和 最新new。

同样需要在home.json中注册这两个组件

{

"component": true,

"usingComponents": {

"hot": "hot/hot",

"new": "new/new"

}

}

注意home本身是一个component,所以需要注明"component": true

布局文件 home.wxml

最热

最新

js文件 home.js

Component({

/**

* 组件的属性列表

*/

properties: {

},

/**

* 组件的初始数据

*/

data: {

currentTab: 0

},

/**

* 组件的方法列表

*/

methods: {

switchTab(e) {

console.log(e)

let tab = e.currentTarget.id

if (tab === 'tableft') {

this.setData({ currentTab: 0 })

} else if (tab === 'tabright') {

this.setData({ currentTab: 1 })

}

}

}

})

给两个tab的view设置了id属性值为tableft和tabright,设置了id后就可以用e.currentTarget.id获取到当前点击的是哪个元素了。

其他几个页面的代码都大同小异,主要是判断当前点击的是哪个tab,然后根据currentTab判断该显示或隐藏哪个组件。

源码地址:

https://github.com/cachecats/...

总结

以上所述是给大家介绍的微信小程序自定义tab实现多层tab嵌套功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:webpack公共组件引用路径简化小技巧
下一篇:vue和webpack安装命令详解
相关文章

 发表评论

暂时没有评论,来抢沙发吧~