uniapp自定义tabbar封装以及解决闪烁问题 |
您所在的位置：网站首页 › uniapp自定义tabbar样式 › uniapp自定义tabbar封装以及解决闪烁问题 |
uniapp自定义tabbar封装以及解决闪烁问题
|
单纯写个自定义tabbar，在页面切换时会闪烁，所以我们写个自定义tabbar，同时也添加官方的tabbar，但将官方tabbar隐藏掉，通过官方tabbar跳转页面就不会出现闪烁问题，但是第一次加载页面的时候也会有闪烁问题，这个官方有说明
自定义tabbar里 /** * 底部自定义导航 * */ 首页 工单 排版 我的 export default{ name:"tabbar", props:{ //当前页 tabname:{ type:String, default:'home' } }, data(){ return{ } }, methods:{ //通过官方tabbar跳转页面 switc(val){ if(!val)return; uni.switchTab({ url:val }) } } } .tab{ position: fixed; bottom: 0; left: 0; display: flex; z-index: 1; align-items: center; width: 100%; height: 120rpx; background-color: #fff; } .navView{ flex: 1; text-align: center; font-size: 0; } .navView-img{ width: 40rpx; height: 40rpx; margin-bottom: 6rpx; } .tabText{ font-size: 26rpx; color: #999; } .tabTextActive{ font-size: 26rpx; color: #333333; } .navMessage{ width: 150rpx; height: 150rpx; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; padding-bottom: 10rpx; } .navMessage-img{ width: 60rpx; height: 60rpx; } .navMessage-box{ width: 110rpx; height: 110rpx; background:linear-gradient(to bottom right, #ffc528 0%, #ff8054 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; }pages.json里 "tabBar": { "list":[ { "pagePath": "pages/home/index/index", "iconPath": "/static/image/home.png", "selectedIconPath": "/static/image/homeAc.png", "text": "首页" }, { "pagePath": "pages/workOrder/index/index", "iconPath": "/static/image/home.png", "selectedIconPath": "/static/image/homeAc.png", "text": "工单" }, { "pagePath": "pages/setType/index/index", "iconPath": "/static/image/home.png", "selectedIconPath": "/static/image/homeAc.png", "text": "排版" }, { "pagePath": "pages/my/index/index", "iconPath": "/static/image/home.png", "selectedIconPath": "/static/image/homeAc.png", "text": "我的" } ] }app.vue里，在这或许还不能够隐藏掉tabbar，uniapp会有点bug，还需要在你第一个显示的页面里隐藏一下才行 onLaunch() { //隐藏官方的tabBar uni.hideTabBar() }用的页面里 tabname指定当前是哪个页面 |
【本文地址】
今日新闻 |
推荐新闻 |