quickapp_快应用_tabBar

tabBar

      • 配置项中配置tabBar(版本兼容)
      • 使用tabs组件配置tabBar
        • 语法
        • 示例
        • 问题-切换tab没有反应
        • 问题-数据渲染问题
          • 解决
          • 优化
        • 问题-tab的动态配置
      • 第三方组件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] 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">
  <!-- if='tabList.length'-->
  <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>

<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>
问题-切换tab没有反应

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

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

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

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

这是为什么呢？

原因是因为tab组件的子组件tab-bar、tab-content中的数据是不允许动态变换的！

若是动态加载需要在加载完成时再渲染，也就是加上if判断

<tabs index="{{selectedTab}}" onchange="changeTab" if='tabList.length'>
  ...
</tabs>
问题-数据渲染问题

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

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

问题1：当打开示例中的页面时会同时初始化这四个组件(打开页面时走4个组件的init生命周期函数)。

思考：我就在想要不在页面展现的时候再初始化呢(show生命周期中)，经过实践发现自定义组件没有show生命周期。

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

原因：[1] 切换tab的时候都是在main页面，不会执行任何生命周期; [2]在主页去其他页面点击左上角返回时走的是main组件的show生命周期，子组件不执行任何生命周期。因此除了通过router跳转到首页外，子组件只初始化一次！

解决

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

若是介意同时加载

  • [1]自定义组件中：不在init生命周期中进行初始化，封装一个init方法进行初始化
    init(){
  // 初始化
}
  • [2] 主页中：在ready生命周期默认初始化第一个组件
    onReady(){
  this.$child('library').init()
}
    每次展示页面和切换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()
  }
}
优化

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

所以我在main页面打开时同时初始化四个页面

在切换tab或者是展示main页面时只重新加载书架的内容(因为书架内容会根据用户行为实时变化)

另外在书城、排行榜、我的页面添加下拉刷新(若是用户想要更新数据可以通过下拉刷新去更新)

  • [1] 组件：在init生命周期中进行初始化，封装一个init方法进行初始化
    onInit(){
  this.init()
},
init(){
  // 初始化
}
  • [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()
  }
}
问题-tab的动态配置

现在的tab虽然tab-bar中的数据可以动态配置(动态显示tab名字和icon),但是对应的组件是固定的。
在这里插入图片描述
此时可以通过循环判断的方式进行

通过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>

注意： 只能通过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>

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

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

比如跳转到排行版页面

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

第三方组件tabbar

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/157904.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

顶部动态菜单栏的使用

顶部动态菜单栏的使用

效果图 开发环境 vue3 关键逻辑 //导航栏状态选择 const navbarSolid ref(false); //初始化导航栏高度 const navbarHeight ref(0);/*** 根据滚动距离改变样式*/ function checkNavbarOpacity() {navbarSolid.value window.pageYOffset > navbarHeight.value / 2; }/**…
阅读更多...
Redis(列表List)

Redis(列表List)

使用LPUSH从头部添加元素&#xff0c;可以一次添加一个或多个。 使用LRANGE 查看列表中的数据&#xff0c;0表示起始位置&#xff0c;-1表示结束位置。 当然也可以使用RPUSH来从尾部添加元素。 可以使用RPOP从尾部删除元素&#xff0c;会返回删除的元素的值。 同理使用LPOP…
阅读更多...
树状图怎么画？推荐这个好用的在线树状图软件！

树状图怎么画？推荐这个好用的在线树状图软件！

在日常工作和学习中&#xff0c;我们需要用到各种各样的图表&#xff0c;树状图是其中之一。 树状图是什么&#xff1f; 树状图是一种层次式的图形结构&#xff0c;可以用来展示数据之间的关系&#xff0c;并且可以在一定程度上提高工作和学习的效率。 树状图通常用来表示…
阅读更多...
Antv/G2 分组柱状图+折线图双轴图表

Antv/G2 分组柱状图+折线图双轴图表

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,heightdevice-height"><title>分组柱状图折线图双轴图表</title><styl…
阅读更多...
复杂数据统计与R语言程序设计实验二

复杂数据统计与R语言程序设计实验二

1、创建一个对象&#xff0c;并进行数据类型的转换、判别等操作&#xff0c;步骤如下。 ①使用命令清空工作空间&#xff0c;创建一个对象x&#xff0c;内含元素为序列&#xff1a;1&#xff0c;3&#xff0c;5&#xff0c;6&#xff0c;8。 ②判断对象x是否为数值型数据。 ③…
阅读更多...
CFI(Common Flash Interface)简介

CFI(Common Flash Interface)简介

CFI定义了符合CFI规则设备的基本Query接口&#xff0c;包括已知或待拟定的flash Read/Write/Program/Erase控制接口。Query接口以结构体形式定义与flash设备相关的关键参数&#xff0c;但是CFI不会对单个flash设备厂家指定详细的指令集、状态轮询模式以及软件算法。 1.操作概要…
阅读更多...
电子商务税收问题：跨境电商的挑战与解决

电子商务税收问题：跨境电商的挑战与解决

随着电子商务的崛起&#xff0c;跨境电商已经成为全球贸易的主要动力之一。然而&#xff0c;电子商务的快速发展也带来了一系列税收问题&#xff0c;尤其是涉及跨境交易的税收问题。本文将深入探讨跨境电商所面临的税收挑战&#xff0c;以及政府和国际组织正在采取的解决方案。…
阅读更多...
开源与闭源：驾驭大模型未来的关键决断

开源与闭源：驾驭大模型未来的关键决断

在数字化的时代洪流中&#xff0c;开源与闭源的选择不断成为技术界的重要分水岭。随着特斯拉CEO埃隆马斯克的言论及其决策&#xff0c;公开支持开源&#xff0c;并糅合商业理念与技术革新&#xff0c;使得这场辩论再次成为公众关注的焦点。那么&#xff0c;在这场关乎技术发展脉…
阅读更多...
Java和JavaScript是一样的技术吗？

Java和JavaScript是一样的技术吗？

目录 一、Java 是什么 二、JavaScript 是什么 三、Java 和 JavaScript 的区别 一、Java 是什么 Java是一种广泛使用的计算机编程语言&#xff0c;最初由Sun Microsystems&#xff08;后被Oracle收购&#xff09;于1995年发布。Java是一种面向对象的语言&#xff0c;设计初衷…
阅读更多...
产品卖点怎么写，如何打造卖点？

产品卖点怎么写，如何打造卖点？

阅读更多...
STM32定时器实现毫秒/秒级任务框架

STM32定时器实现毫秒/秒级任务框架

STM32定时器实现毫秒/秒级任务框架 CubeMX配置代码分享总结 这是一期代码思路分&#xff0c;通过定时器&#xff08;以定时器10为例&#xff09;实现规定时间间隔执行指定任务。。。。。。 CubeMX配置 关于定时器的配置&#xff0c;这里不做介绍&#xff0c;不懂的可以看&#…
阅读更多...
【小收获】数组在声明时整体赋值的细节

【小收获】数组在声明时整体赋值的细节

在C中&#xff0c;在全局区声明的数组会自动初始化 如果没有为全局区的整数类型的数组指定初始值&#xff0c;那么它的元素都会被自动初始化为0。该特性适用于所有整数类型的数组&#xff0c;包括char、short、int、long等。&#xff08;注:char类型数组自动初始化为0&#xff…
阅读更多...
漏电继电器 JELR-(120)FG AC220V 零序电流互感器 孔径φ45 上海约瑟

漏电继电器 JELR-(120)FG AC220V 零序电流互感器 孔径φ45 上海约瑟

JELR-FG系列漏电继电器 JELR-15FG漏电继电器&#xff1b; JELR-25FG漏电继电器&#xff1b; JELR-32FG漏电继电器&#xff1b; JELR-63FG漏电继电器&#xff1b; JELR-100FG漏电继电器; JELR-120FG漏电继电器&#xff1b; JELR-160FG漏电继电器&#xff1b; JELR-200FG…
阅读更多...
在已安装Anaconda环境下配置沐神（李沐老师）动手学深度学习环境

在已安装Anaconda环境下配置沐神（李沐老师）动手学深度学习环境

沐神配置环境视频 B站李沐老师动手学深度学习环境配置视频 在windows中配置沐神深度学习环境 前提&#xff1a;安装了Anaconda基本环境&#xff0c;了解Jupyter NoteBook 1.打开 Anaconda Prompt 2.创建虚拟环境 create conda -n d2l-zh python3.8 pip3.激活虚拟环境 con…
阅读更多...
canal1.1.7实战

canal1.1.7实战

1.环境搭建 canal可以用来监听mysql数据库的变化&#xff0c;用来同步数据 先下载最新的部署版本&#xff0c;release地址:Releases alibaba/canal GitHub 包下载地址: https://github.com/alibaba/canal/releases/download/canal-1.1.7/canal.deployer-1.1.7.tar.gz 下载…
阅读更多...
2023/11/16JAVA学习(Socket,ServerSocket,BS架构,Junit单元测试,反射,简易框架,注解,元注解)

2023/11/16JAVA学习(Socket,ServerSocket,BS架构,Junit单元测试,反射,简易框架,注解,元注解)

阅读更多...
《Effective C++》条款20

《Effective C++》条款20

宁以pass-by-reference-to-const替换pass-by-value class A { public:A() {cout << "A()" << endl;}A(const A& a){cout << "A(const A& a)" << endl;}~A(){cout << "~A()" << endl;} private:stri…
阅读更多...
如何选择数据恢复软件？前 5 名免费数据恢复软件榜单供参考

如何选择数据恢复软件？前 5 名免费数据恢复软件榜单供参考

我们都知道开源数据恢复软件有很多优点。搜索免费解决方案的用户会被其可用性所吸引&#xff0c;而那些拥有足够技术技能的用户可能会被其定制软件以满足其需求的灵活性所吸引。在本文中&#xff0c;我们为您挑选了最好的开源数据恢复软件&#xff0c;并将尝试回答开源软件是否…
阅读更多...
基于SpringBoot的SSMP整合案例（在Linux中发布项目的注意事项与具体步骤步骤）

基于SpringBoot的SSMP整合案例（在Linux中发布项目的注意事项与具体步骤步骤）

前言与注意 这几天在Linux中上线之前的小项目时&#xff0c;遇到了很多的问题&#xff0c;Linux镜像的选择&#xff0c;jdk&#xff0c; mysql在linux中的下载&#xff0c;使用finallshell连接linux&#xff0c;使用tomcat连接linux中的数据库........ 在下面的注意事项中我会将…
阅读更多...
C#学习相关系列之Linq常用方法---排序（一）

C#学习相关系列之Linq常用方法---排序（一）

一、构建数据 public class Student_1{public int ID { get; set; }public string Name { get; set; }public int Chinese { get; set; }public int Math { get; set; }public int English { get; set; }public override string ToString(){return string.Format("ID:{0},…
阅读更多...
最新文章

Copyright @ 2022~2023