微客导航 » 文章资讯 » uni-app 自定义底部导航栏的实现

uni-app 自定义底部导航栏的实现

2023-07-08 09:57:03 176

这是我目前发现较好的uni-app自定义底部导航栏方法，其他方法的缺点主要是在切换时，要么会闪烁，要么会每点击一下，都会请求一次数据。如果有其他更好的方法，欢迎评论留言，最近才开始用uni-app写项目，之前只是看了下文档。

1.tabbar组件



mounted(){
letdom=uni.createSelectorQuery().select('.tabbar-container')
dom.boundingClientRect(e=>{
//tabbarHeight使用频次较高，就设为全局变量了
getApp().globalData.tabbarHeight=e.height
}).exec()
}


.iconfont{
font-size:18px;
}

.tabbar-container{
display:flex;
justify-content:space-evenly;
text-align:center;
padding:10px0;
background-color:#fff;
box-shadow:0-1.5px3px#eee;
z-index:999;

.title{
font-size:12px;
}
}

2.引入

这里使用的是swiper，duration为0是为了关闭页面切换动画效果，



mounted(){
this.tabbarHeight=getApp().globalData.tabbarHeight
},

getCurrentIndex(e){
this.currentIndex=e;
}

到此这篇关于uni-app自定义底部导航栏的实现的文章就介绍到这了,更多相关uni-app底部导航栏内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

uni-app 自定义底部导航栏的实现

热门推荐

随机推荐