UniApp微信小程序登录不同角色动态设置TabBer(多于5个TabBer页面) |
您所在的位置:网站首页 › uniapp动态tab › UniApp微信小程序登录不同角色动态设置TabBer(多于5个TabBer页面) |
最近工作在用UniApp做项目,上个星期左右这个项目APP端已经做的差不多了,后面接到任务要把这个项目发布小程序版本,一些样式兼容问题处理完后卡在了动态设置TabBer这上面,在app端使用UniApp的api(uni.setTabBarItem(OBJECT)即可完成功能需求),但是这个api在微信小程序端仅支持修改文字图标不支持修改pagePath,然后就开始找各种文章,文档,询问同行朋友等,最终得出大都以下两种解决方案。 方案一:使用微信小程序开发文档中推荐的自定义TabBer 在 app.json 中的 tabBar 项指定 custom 字段,开启使用自定义TabBer。在根目录新建“custom-tab-bar”文件夹,在该文件夹下新建index.js,index.json,index.wxml,index.wxss编写 tabBar 代码 缺点:需要跳转的TabBer页面还是需要在配置文件中tabBar-list下配置页面路径等信息,所以TabBer页面多于5个该方案还是不行。方案二:在components把TabBer封装组件,在跳转的tabber页面显示(使用) 缺点:跳转时页面闪动问题(我也没试,反正用这方案的都在吐槽这个问题,我想了一下应该是说在从一个tabber跳到另一个tabber的这段时间,自定义的组件也随着页面的加载销毁这个显示隐藏的视觉问题,原生的就不会闪跳转页面也一直在底部),再有就是性能问题UniApp官方也建议除H5在APP端和小程序端非必要不自定义TabBer,还有就是我app端都查不多了不想在花时间去封装组件写跳转逻辑还各个tabber页面去处理,关键效果还不好(主要还是懒)。 不知何时不知何地,抓破头皮,在工位上,n次被同事这问题那问题打断。n+1²次在嘈杂的办公环境中被打断思路。人都要傻了,就差精神分裂了,最终皇天不负臭男人, 只要思想不滑坡,困难总比办法多。 一点一点的实现了效果. 效果图: 微信模拟器打开的,代码没优化,也没压缩,电脑性能也是卡卡的,所以看起来有点卡渲染显示有点慢,正式发布后会快很多!(效果图后面前两个tabber出现加载效果的时候是我点了编译!) 查看方案实现步骤 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |