微信小程序自定义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 相关文章推荐
JavaScript的各种常见函数定义方法
Sep 16 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
js全选按钮的实现方法
Nov 17 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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/12/21 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
对python append 与浅拷贝的实例讲解
2018/05/04 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Python基于requests库爬取网站信息
2020/03/02 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
优乐美广告词
2014/03/14 职场文书
大学英语专业求职信
2014/06/21 职场文书
合作经营协议书范本
2014/09/16 职场文书
物业保安辞职信
2015/05/12 职场文书
生活委员竞选稿
2015/11/21 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
Docker下安装Oracle19c
2022/04/13 Servers
Python开发五子棋小游戏
2022/04/28 Python