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.indexthis.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.indexthis.selectedTab = indexthis.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.indexthis.selectedTab = indexthis.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组件

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言一个奇奇怪怪的小细节(定制初始化中的一个坑)

在今天写C代码的过程中&#xff0c;发现了一个奇怪的现象&#xff1a; 假设我们有如下数据结构&#xff1a; struct AddressMapping {u64 lba;union{u64 addr;u64 addrPage;struct ScatterIter sgiter;};u64 size; }__attribute__ ((__packed__));struct ScatterIter{struct Sc…

一文看分布式锁

为什么会存在分布式锁&#xff1f; 经典场景-扣库存&#xff0c;多人去同时购买一件商品&#xff0c;首先会查询判断是否有剩余&#xff0c;如果有进行购买并扣减库存&#xff0c;没有提示库存不足。假如现在仅存有一件商品&#xff0c;3人同时购买&#xff0c;三个线程同时执…

最新自动定位版本付费进群系统源码

更新内容&#xff1a; 1.在网站首页增加了付款轮播功能。 2.新增了城市定位功能&#xff0c;方便用户查找所在城市的相关信息。 3.对域名库及支付设置进行了更新和优化。 4.增加了一种图模板设置模式&#xff0c;简化了后台模板设置流程。 5.此外还进行了前后台的其他优化…

ClickHouse的分片和副本

1.副本 副本的目的主要是保障数据的高可用性&#xff0c;即使一台ClickHouse节点宕机&#xff0c;那么也可以从其他服务器获得相同的数据。 Data Replication | ClickHouse Docs 1.1 副本写入流程 1.2 配置步骤 &#xff08;1&#xff09;启动zookeeper集群 &#xff08;2&…

【蓝桥杯省赛真题01】C++水下探测器 第十届蓝桥杯中小学生创意编程大赛C++编程比赛省赛真题解析

目录 C/C++水下探测器 一、题目要求 1、编程实现 2、输入输出 二、算法分析

uniapp-轮播图点击预览功能

实现效果 点击后打开预览图 实现代码 <swiper v-if"this.bannerList.length > 1" class"swiper" autoplay"true" duration"500" interval"2000" change"changeSwiper"><swiper-item class"swip…

WordPress网站迁移实战经验

前几日,网站服务器到期,换了服务商,就把我的WordPress的网站迁移到本地电脑了。方便以后文章迁移。 本次迁移网站主要经历以下几个步骤。 1.域名转出。 2.备份数据库及网站文件下载。 3.重新搭建WordPress网站。 4.网站文件及数据库导入。 下面详细介绍下每个步骤的操作…

一些RLHF的平替汇总

卷友们好&#xff0c;我是rumor。 众所周知&#xff0c;RLHF十分玄学且令人望而却步。我听过有的小道消息说提升很大&#xff0c;也有小道消息说效果不明显&#xff0c;究其根本还是系统链路太长自由度太高&#xff0c;不像SFT一样可以通过数据配比、prompt、有限的超参数来可控…

揭示高防CDN的局限性与探讨其小众化原因

在网络安全领域&#xff0c;高防CDN&#xff08;高防御内容分发网络&#xff09;被认为是保护网站免受恶意攻击的强大工具&#xff0c;然而&#xff0c;尽管其在防护方面表现卓越&#xff0c;高防CDN在广泛应用中仍然相对小众。本文将从高防CDN的局限性出发&#xff0c;深入探讨…

智能配电房管理系统

智能配电房管理系统依托电易云-智慧电力物联网&#xff0c;是一种集成了互联网、物联网、大数据、人工智能等先进技术的管理系统&#xff0c;专门用于配电房的智能化管理和运维。以下是智能配电房管理系统的主要功能和特点&#xff1a; 一、主要功能&#xff1a; 实时监测与数据…

【大模型应用开发教程】动手学大模型应用开发,一起探索LLM Universe

动手学大模型应用开发 01 开源初心02 教程内容03 学习指南04 文章最后 原文链接-奇想星球 LLM 正逐步成为信息世界的新革命力量&#xff0c;其通过强大的自然语言理解、自然语言生成能力&#xff0c;为开发者提供了新的、更强大的应用开发选择。随着国内外井喷式的 LLM API 服…

【LeetCode刷题日志】20.有效的括号

&#x1f388;个人主页&#xff1a;库库的里昂 &#x1f390;C/C领域新星创作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏✨收录专栏&#xff1a;LeetCode 刷题日志&#x1f91d;希望作者的文章能对你有所帮助&#xff0c;有不足的地方请在评论区留言指正&#xff0c;…