devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

quickapp_快应用_tabBar_快应用tabbar不展示

作者：知新_RL | 2024-03-17 07:58:58

赞

踩

快应用tabbar不展示

tabBar

在这里插入图片描述
一般首页都会显示几个tab用于进行页面切换，以下是几种tab配置方式。

配置项中配置tabBar(版本兼容)

在manifest.json配置文件中display.tabBar可以进行tab配置，如下

{
  "display": {
    "tabBar": {
        "color": "#000000",          //文字颜色
        "selectedColor": "#008000",        //选中文字颜色
        "tabbarBackgroundColor": "#FFFFFF",    //组件背景
         "list": [{
            "pagePath": "/home",  //页面路由路径
            "pageParams":"{test: 'test1'}" ,  //页面参数
            "iconPath": "/Common/home.png", //图标
            "selectedIconPath": "/Common/home_active.png", //选中图标
            "text": "首页"    //文字内容
          },
          {
            "pagePath": "/mine",
            "pageParams":"{test: 'test2'}",
            "iconPath": "/Common/mine.png",
            "selectedIconPath": "/Common/mine_active.png",
            "text": "我的"
          }]
      }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

但是此时存在以下两个问题

  • [1] tabBar配置项是在1110+版本适用，在低于1110版本中不起作用。
    (目前绝大部分机型版本为1070+)，还有很多手机型号不兼容！
  • [2] tab不能动态配置！

使用tabs组件配置tabBar

语法

  • 概括

    tabs组件：仅支持最多一个tab-bar组件和最多一个tab-content组件。
    在这里插入图片描述

    tab-bar组件： tabs的标签展示区，子组件排列方式为横向排列。
    在这里插入图片描述

    tab-content组件：tabs的内容展示区，高度默认充满 tabs 剩余空间，子组件排列方式为横向排列。
    在这里插入图片描述

示例
<!-- 书城 -->
<import name="library" src="../../components/library"></import>
<!-- 书架 -->
<import name="bookshelf" src="../../components/bookshelf"></import>
<!-- 排行榜 -->
<import name="ranking" src="../../components/bookshelf/ranking.ux"></import>
<!-- 我的 -->
<import name="mine" src="../../components/mine"></import>

<template>
<div class="page-wrapper">
  <tabs index="{{selectedTab}}" onchange="changeTab" >
    <tab-content>
      <library></library>
      <bookshelf id='bookshelf'></bookshelf>
      <ranking ></ranking>
      <mine></mine>
    </tab-content>
    <tab-bar mode="fixed" class="tab-bar">
      <div class="tab-item" for="tabList">
        <image class="iconfont" src='{{ selectedTab === $idx ? $item.onfocus_icon_url : $item.icon_url}}'></image>
        <text class="tab-title">{{ $item.title }}</text>
      </div>
    </tab-bar>
  </tabs>
</div>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
<script>
export default {
  private: {
    tabList: [],
    selectedTab: 0 //默认第一个页面
  },
  onInit() {
    this.init()
  },
  init (){
    this.tabList = [
      {
        title: '书城',
        icon_url: 'https://img.iwave.net.cn/other/c7d4037ba99fea69c46dc096f46b11b6.png',
        onfocus_icon_url: 'https://img.iwave.net.cn/other/c996112028a8de365b292d7fcc95ebc2.png',
        type: 0
      },
      {
        title: '书架',
        icon_url: 'https://img.iwave.net.cn/other/6862b4ec95abc6f6f40494f67a6fae0d.png',
        onfocus_icon_url: 'https://img.iwave.net.cn/other/23512e7e0b47bbaf0d2a86f7dfb1c986.png',
        type: 1
      },
      {
        title: '排行榜',
        icon_url: 'https://img.iwave.net.cn/other/64f89f4184c04f20143c49c0685659c1.png',
        onfocus_icon_url: 'https://img.iwave.net.cn/other/d5b9e41090cdbbc1d92dae91f2d4398b.png',
        type: 2
      },
      {
        title: '我的',
        icon_url: 'https://img.iwave.net.cn/other/f6e7f3684b50f041f00e88c0753466c0.png',
        onfocus_icon_url: 'https://img.iwave.net.cn/other/2e72f98dc9780b08cd00f684f2ca2c21.png',
        type: 3
      }
    ]
  },
  changeTab(e) {
    let index = e.index === undefined ? 1 : e.index
    this.selectedTab = index
  }
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
问题-切换tab没有反应

最初我是直接将tabList写死的(如下)，这样tab切换没有问题

init(){
this.tabList = [...]
}

  • 1
  • 2
  • 3

后来tabList在后端获取数据进行配置，从后端获取数据，发现tab切换没有反应

init(){
  const res = await $http.httpGet('init')
  if (res && !res.status) {
    this.tabList = res.data.tabs
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

这是为什么呢？

原因是因为tab组件的子组件tab-bar、tab-content中的数据是不允许动态变换的！若是动态加载需要在加载完成时再渲染，也就是加上if判断

<tabs index="{{selectedTab}}" onchange="changeTab" if='tabList.length'>
  ...
</tabs>

  • 1
  • 2
  • 3

经过上述处理之后tab组件的切换就没有问题了！

问题-数据渲染问题

知识点： 自定义组件生命周期+ 父子组件生命周期执行顺序

前提：以上示例中的四个组件(书城、书架、排行榜、我的)的初始化都是在当前组件的init生命周期执行的。

这4个tab页面现在被做成一个页面(引入了4个组件)，而父子组件初始化如下

父onInit-> 子onInit -> 子onReady -> 父onReady -> 父onShow

  • 1

虽然在表面看起来这是4个页面（但是实际上是1个页面中的四个组件），因此在项目打开的时候这4个页面/组件会同时初始化(多接口调用)

问题2: 再次打开书城、书架、排行榜、我的页面时存在不更新数据的情况。

tips:引入的四个子组件虽然表面看起来只展示了一个，但是实际是展示了4个(只不过3个被溢出隐藏了)！

因此在切换tab的时候其实并没有切换页面，所以数据也就不会更新了！

解决

tips: 如果数据量不是很大的话，可以接受在初始化的时候同时初始化4个页面！

若是介意同时加载

  • [1]自定义组件中：不在init生命周期中进行初始化，封装一个init方法进行初始化
    init(){
  // 初始化
}

    • 1
    • 2
    • 3
  • [2] 主页中：在ready生命周期默认初始化第一个组件
    onReady(){
  this.$child('library').init()
}

    • 1
    • 2
    • 3
    每次展示页面和切换tab时加载对应组件
    onShow(){
  this.refreshBookShelf()
},
changeTab(e) {
  let index = e.index === undefined ? 1 : e.index
  this.selectedTab = index
  this.refreshBookShelf()
},
refreshBookShelf(){
  if (this.selectedTab == 0) {
    this.$child('library').init()
  }
  if (this.selectedTab == 1) {
    this.$child('bookshelf').init()
  }
  if (this.selectedTab == 2) {
    this.$child('ranking').init()
  }
  if (this.selectedTab == 3) {
    this.$child('mine').init()
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
优化

在这个需求里面书城、排行榜、我的页面的数据不是经常更新，所以

  • [1]在main页面打开时同时初始化四个页面(只有打开页面时加载—相当于页面缓存)
  • [2]在书城、排行榜、我的页面添加下拉刷新(若是用户想要更新数据可以通过下拉刷新去更新)

而书架的内容会根据用户行为实时变化，所以在切换tab或者是展示main页面时需要重新加载

  • [1] 组件：在init生命周期中进行初始化，封装一个init方法进行初始化
    onInit(){
  this.init()
},
init(){
  // 初始化
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • [2] 主页：由于书架数据需要每次打开页面都更新
    onShow(){
  this.refreshBookShelf()
},
changeTab(e) {
  let index = e.index === undefined ? 1 : e.index
  this.selectedTab = index
  this.refreshBookShelf()
},
refreshBookShelf(){
  if (this.selectedTab == 1) {
    this.$child('bookshelf').init()
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
问题-tab的动态配置

现在的tab虽然tab-bar中的数据是在后端获取(动态配置),但是对应的组件是固定的。
在这里插入图片描述
以上代码中无论tab-bar中第一个元素的文本显示书城、书架还是我的，切换时显示的永远是书城的内容！

此时可以通过循环判断的方式进行

通过tab-bar配置的type固定是哪个组件进行渲染

<block for='item in tabList'>
  <library if='item.type == 0'></library>
  <bookshelf if='item.type == 1' id='bookshelf'></bookshelf>
  <ranking if='item.type == 2'></ranking>
  <mine if='item.type == 3'></mine>
</block>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注意： 只能通过if判断是否展示组件！！！！使用三元表达式和&&判断不起效果！！！！

<block for='item in tabList'>
  {{
    (
      item.type == 0 ? <library></library> : (
      item.type == 1 ? <bookshelf id='bookshelf'></bookshelf> : (
      item.type == 2 ? <ranking></ranking> : <mine></mine>
    )))
  }}
</block>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

此时会在tab-content中渲染16个组件！！！
在这里插入图片描述
相当于是不管判断成不成立，每次循环都渲染4个组件！！！

另外就是其他页面跳转到main页面时传递的selectedTab值必须与type对应！

比如跳转到排行版页面

const index = this.tabList.findIndex(item => item.type == 2)
router.push('/page/main',{
  selectedTab: index
})

  • 1
  • 2
  • 3
  • 4

第三方组件tabbar(推荐)

直接使用第三方组件库的tabbar组件

本质就是将tabbar固定定位在底部，每次切换tab时清除除此页面外的其他页面

router.push({
  uri: path,
  params: {
    ___PARAM_LAUNCH_FLAG___: 'clearTask'
  }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

tips：
推荐使用tabbar组件进行tab配置，因为可以将4个页面隔离开来！
若是使用tabs组件配置tabBar会增加组件之间的耦合性！

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号