阅读 64

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

原文链接: www.wxapp-union.com

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

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

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

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

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

官方 tabBar 地址:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

一、Demo结构

先看效果图吧

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

关系图如下:

项目
    主页
        最热
        最新
    我的
        电影
        音乐复制代码

二、开始撸代码

再看代码结构

两种页面结构

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

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

相同点:

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

不同点:

  1. components 要在  json 文件中注明:"component": true
{
  "component": true,
  "usingComponents": {
    "movie": "movie/movie",
    "music": "music/music"
  }
}复制代码
  1. 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 });
}复制代码

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

  1. 这里判断相等用了 == 而不是  === ,因为通过 e.currentTarget.dataset.current 取到的值是字符串类型的,也就是给  data 设置的值是字符串的 0 和  1 ,如果用 === 就会判断出错。当然也可以强转成数字类型的,我比较懒~
  2. 控制组件显示隐藏可以用 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/mini-multi-tab

文章分类
前端
文章标签