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

网络编程 2024/11/16 佚名

3 2 1

鸳鸯亭资源网 Design By www.gvabc.com

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

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

项目中有个多 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",
  "mine": "./mine/mine"
 }
}

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

<view class='container'>
 <view class='content'>
  <view wx:if='{{currentTab == 0}}'>
   <home/>
  </view>
  <view wx:if='{{currentTab == 1}}'>
   <mine/>
  </view>
 </view>
 <!-- 下面的两个tab -->
 <view class='bottom-tab'>
  <view class='tab-item {{currentTab == 0 "active" : ""}}' data-current="0" bindtap='switchTab'>
   <image src='{{currentTab == 0 "../../assets/home_active.png" : "../../assets/home.png"}}' class='item-img'></image>
   <text class='item-text'>主页</text>
  </view>

  <view class='tab-item {{currentTab == 1 "active" : ""}}' data-current="1" bindtap='switchTab'>
   <image src='{{currentTab == 1 "../../assets/mine_active.png" : "../../assets/mine.png"}}' class='item-img'></image>
   <text class='item-text'>我的</text>
  </view>
 </view>
</view>

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的时候组件都会重新渲染，生命周期方法会重新调用执行。而用 hidden则不会重新渲染，生命周期函数也不会重新调用。

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

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

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

{
 "component": true,
 "usingComponents": {
  "hot": "hot/hot",
  "new": "new/new"
 }
}

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

布局文件 home.wxml

<view class='container'>
 <view class='tab-wrapper'>
  <view id='tableft' class='tab-left {{currentTab === 0 "tab-active":""}}' bindtap='switchTab'>最热</view>
  <view id='tabright' class='tab-right {{currentTab === 1 "tab-active" : ""}}' bindtap='switchTab'>最新</view>
 </view>
 <view class='content-wrapper' wx:if='{{currentTab === 0}}'><hot/></view>
 <view class='content-wrapper' wx:if='{{currentTab === 1}}'><new/></view>
</view>

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嵌套功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

微信小程序,多层嵌套,多层tab嵌套

标签：

微信小程序,多层嵌套,多层tab嵌套

鸳鸯亭资源网 Design By www.gvabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

鸳鸯亭资源网 Design By www.gvabc.com

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

暂无评论...

www.gvabc.com 鸳鸯亭资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

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

微信小程序,多层嵌套,多层tab嵌套

webpack公共组件引用路径简化小技巧

微信小程序实现自定义modal弹窗封装的方法

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

微信小程序,多层嵌套,多层tab嵌套

webpack公共组件引用路径简化小技巧

微信小程序实现自定义modal弹窗封装的方法

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存