微信小程序开发动态设置tabbar

需求描述

不同身份的用户登录后，动态更改底部导航栏，也就是 tabbar。
注意不是简单改变 tabbar item 的样式，而是需要更改 item 文字，icon，关键是跳转链接 pagePath。

技术框架

基于uni-app开发，使用了 colorui、uview等第三方框架。

但当前阶段主要是以微信小程序的作为客户端展示。

解决思路

下面就我实际开发中实际实践过的解决思路做了个总结：

基于 view 自定义 tabbar
- 基于 colorui 实现思路，view 布局一个完全自定义的 tabbar，然后基于一个页面，把 tab 页面以组件的形式，通过 v-if 来切换实现切换 tab 的效果。
  - 优点：高度灵活，可任意自定义样式。
  - 缺点：
    - 性能问题：当页面比较简单的（如博客或企业官网），还比较流畅；当每个 tab 页面稍微复杂点，加载慢卡顿问题明显，用户体验特别差，当然和设备硬件能力也有关系（这是我放弃该方案的直接原因）。
    - 路由问题：同样对也小型项目，页面功能结构简单，也只是基本可用。对于页面复杂，每次路由到某个tab 页面，再加上组件的生命周期限制，触发更新数据是个棘手的问题。
- 基于 uview 实现思路，为了提高性能问题，uview 官方还是基于原生 tabbar 出来一个解决方案，但是 隐藏原生 tabbar 后，微信小程序启动的一瞬间，原生 tabbar 还是有闪现的一瞬，这个体验极差，但是这个问题，是微信小程序官方都未解决的问题。所以该方式我已放弃了。
原生 tabbar
- 优点
  - 点击切换，页面加载性能出色。
  - 配置简单，只需要 page.json 中配置 tabbar 项即可，样式简单设置，其它都依赖官方能力。
- 缺点
  - 样式自定义能力极差，这个 UI设计能力强一些我都勉强接受了。
  - 无法动态设置 tab item 的 pagePath，直接无法满足需求，这是我放弃该方案的直接原因。（注意 uni-app 的 api 虽然提供了该参数，但并不支持微信小程序。）
微信官方的自定义 tabbar
- 目前还未实践，主要是平台扩展性弱，官方的 demo 很简单，已经出现了切换 tabbar 时重新加载渲染 tabbar 的不好体验。然而可自定义动态配置优点，带来的工作量稍微有点大，暂时放弃。

最终方案

使用原生的 tabbar，通过官方提供的 api 设置文字和icon，以及红点角标数字等，解决不能动态设置 pagePath 的替代思路是在 tab 页面内做 v-if 判断，根据角色不同，来显示不同内容，体验尚可，而且将来支持动态支持 pagePath 了，也容易更改，不会涉及太多代码修改。

这种设计思路，目前来讲，无论是交互体验还是页面加载性能，都是比较适合我们目前的项目的。也可能对您的项目不合适，所以仅供参考。

如果您有更好的解决思路，期待您的分享~~

参考资料

https://51blog.xyz/article/23.html

微信小程序开发动态设置tabbar相关推荐

微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
微信小程序开发笔记—设置页面密码
文章目录一.功能概述二.实现效果三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...
小程序_动态设置tabBar主题皮肤
序:需要动态设置页面的一些背景.按钮状态.文字的颜色,图片.图标等等,包括tabBar的图标和文字的颜色,切换按钮统一设置,这个在页面上实现比较容易,按理说tabBar的设置也是简单的,确实是!只要你 ...
微信小程序开发，设置小程序为可转发可分享朋友圈
微信小程序开发过程中,我们需要把小程序设置为用户可以自己转发给好友,也可以把小程序分享到朋友圈,需要按照以下步骤来设置. 1. 在page中需要定义方法 onShareAppMessage(res) ...
微信小程序 setData动态设置数组中的数据
现在有一组死数据但是想在使用时动态修改其中的值在setData中不能直接设置,真想......,算了是这个和谐的社会救了那个工程师. 接下来,我们去征服她! 死数据: //地图上方控件contro ...
微信小程序开发——动态改变按钮背景颜色
在wxss文件中可以简单地设置button的背景颜色和各种样式,然而,这样的样式设计不能够动态改变.那么,如何动态改变控件的样式呢?下面以button为例来介绍. 此方法不用修改wxss文件,首先,在 ...
【微信小程序开发】自定义tabBar案例（定制消息99+小红心）
微信小程序开发：实现高斯模糊效果（毛玻璃效果）
前言在微信小程序开发的时候,也会遇到一些和在前端开发一样的样式需求,二者的相通类似性非常的高,就拿样式相关的需求来说,可以说是一模一样的操作.那么本文就来分享一个关于实现高斯模糊效果的需求,微信小程 ...
微信小程序开发：实现毛玻璃效果
前言在微信小程序开发的时候,也会遇到一些和在前端开发一样的样式需求,二者的相通类似性非常的高,就拿样式相关的需求来说,可以说是一模一样的操作.那么本文就来分享一个关于实现高斯模糊效果的需求,微信小程 ...

微信小程序开发动态设置tabbar

微信小程序开发动态设置tabbar相关推荐

最新文章

热门文章