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


Posted in Javascript onJune 15, 2018

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

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

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

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

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

一、Demo结构

先看效果图吧

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

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

结构是这样的:程序主界面包含两个 tab:主页和我的,主页又包含两个tab:最热和最新;我的也包含两个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嵌套功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
使用jquery如何获取时间
Oct 13 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 #Javascript
详解vue组件开发脚手架
Jun 15 #Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 #Javascript
vue cli 3.0 使用全过程解析
Jun 14 #Javascript
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 #Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 #Javascript
You might like
PHP的栏目导航程序
2006/10/09 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP实现百度人脸识别
2019/05/06 PHP
浅谈JavaScript之事件绑定
2013/07/08 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
英语简历自我评价
2014/01/26 职场文书
创建青年文明号材料
2014/05/09 职场文书
幸福终点站观后感
2015/06/04 职场文书
生日祝酒词大全
2015/08/10 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
Python 绘制多因子柱状图
2022/05/11 Python