- 概述
- 安装
- 配置
- 模板
- 测试数据
- 多语言
- 常见问题
- Uniapp版 高级授权
- 1.准备工作
- 2.导入项目
- 3.运行项目
- 4.项目发布
- 6.常见问题
- 1.关于自定义导航栏切换闪烁问题
- 2.关于后台移动端样式预览问题
- 3.关于支付配置的问题
- 4.前端跨域的问题
- 5.关于各端内容分享的问题
- 6.关于签到问题
- 7.关于公众号授权登录问题
- 8.关于底部导航的追加或删除问题
- 9.运行微信小程序,进入微信小程序客户端后,没有底部菜单
- 10.关于首页焦点图的修改
- 11.关于发布小程序代码大小超出的问题
- 12.前端显示空白或白屏或提示网络请求错误的问题
- 13.关于如何在非tabbar配置页面显示tabbar导航
- 14.关于更换资讯页为主页的问题
- 15.关于更新1.4.4版本分包问题
- 16.Tabbar底部高亮显示问题
- 17.微信小程序获取手机号失败
- 18.微信小程序从页面侧滑返回或按键返回时Tabbar丢失的问题
- 19.Tabbar底部不支持外部链接的修复方法
- 20.H5下编辑器无法编辑的问题
- 21.移动H5访问时如何自动跳转至H5的页面
- 22.如何使用Uniapp原生导航
- 23.如何修改自定义表单默认调用的表单
- 24.HBuiderx编译时报错dart-sass等错误的解决方法
- 25.保存海报图片失败如何处理?
- 26.为什么后台添加了栏目但Uniapp端不显示?
- 5.登录配置
- API文档
- 功能解说
- 伪静态
- Sitemap
- 数据迁移API(内部调用)
- 安全更新
- Bug 修复说明
1.关于自定义导航栏切换闪烁问题
自定义导航栏,在app和小程序端,切换的时候,导航或页面会闪烁一下,客户体验不佳。
解决思路:
1、使用uniapp的原生导航,在 pages.json 配置文件里,用以下配置替换原来的 tabBar 配置。需要的端使用条件编译判断。
"tabBar": {
"color": "#999",
"selectedColor": "#000",
"backgroundColor": "#FFFFFF",
"borderStyle": "white",
"list":[{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-hl.png",
"text": "首页"
},
{
"pagePath": "pages/article/article",
"iconPath": "static/tabbar/article.png",
"selectedIconPath": "static/tabbar/article-hl.png",
"text": "资讯"
},
{
"pagePath": "pages/product/product",
"iconPath": "static/tabbar/image.png",
"selectedIconPath": "static/tabbar/image-hl.png",
"text": "产品"
},
{
"pagePath": "pages/index/my",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/my-hl.png",
"text": "我的"
}
]
},
2、使用uniapp 的原生导航,即在思路1的基础上,调用api uni.setTabBarItem重设导航。
更多详细的配置参数见:https://uniapp.dcloud.io/api/ui/tabbar
在 APP.vue 的 onShow 方法里,加上以下配置
// #ifdef APP-PLUS
let tabbar = this.vuex_config.tabbar;
if(!tabbar){
this.$util.setTabbar(this.vuex_tabbar);
return;
}
let num = 0;
for (let i in tabbar.list) {
try{
let imagepath = await this.$util.image_cache(tabbar.list[i].image);
let selectedImage = await this.$util.image_cache(tabbar.list[i].selectedImage);
tabbar.list[i].image = imagepath;
tabbar.list[i].selectedImage = selectedImage;
num = i;
}catch(e){
console.log(e)
}
}
//全部下载成功使用服务器的导航,否则启用本地备用导航
if((parseInt(num)+1) == tabbar.list.length){
this.$util.setTabbar(tabbar);
}else{
this.$util.setTabbar(this.vuex_tabbar);
}
// #endif温馨提示
目前的 uniapp前端 源码在app端使用的是第二种方法。代码见pages.json和app.vue两个文件,使用条件编译区分了。当你需要修改为第一种方案时,比如微信小程序,那需要在pages.json加上条件编译|| MP-WEIXIN和uniapp\components\fa-tabbar\fa-tabbar.vue这个文件的条件编译也加上|| MP-WEIXIN即可!其实就是配置原生的tabbar,去掉自定义的tabbar
文档最后更新时间:2025-04-01 10:04:28
著作权归应用插件开发者所有,未经许可,禁止转载、复制此文档的任何内容。
未解决你的问题?请到问答社区「CMS内容管理系统专区」反馈你遇到的问题