介绍 & lt; template>
,& lt; view 类=皌abbar-container"比;
& lt;才能视图
,,:
,,v=?项目,,指数),拷贝tabbarList"
,,:关键=癷ndex"
,,
,,@click=皊witchTab(指数)“;
祝辞才能;
,,& lt; view :类=? # 39;iconfont & # 39;, +, item.icon",/比;
,,& lt; view 类=皌itle"在{{,item.title }} & lt;/view>
& lt;才能/view>
,& lt;/view>
& lt;/template>
安装(){
,let dom =, uni.createSelectorQuery () .select (& # 39; .tabbar-container& # 39;)
dom.boundingClientRect才能(e =祝辞,{
,,//,tabbarHeight使用频次较高,就设为全局变量了
,,,getApp () .globalData.tabbarHeight =e.height
})才能.exec ()
}
& lt; style scoped lang=皊css"比;
.iconfont {
,字体大小:18 px;
}
.tabbar-container {
,显示:flex;
,justify-content: space-evenly;
,text-align:中心;
,填充:10 px 0;
,背景颜色:# fff;
,不必:0,-1.5 px 3 px # eee;
,z - index: 999;
,.title {
,,字体大小:12 px;
,}
}
& lt;/style> & lt; template>
,& lt; view :比;
,& lt;标签栏
,,:currentIndex=癱urrentIndex"
类,,=皌abbar-container"
,,@getCurrentIndex=癵etCurrentIndex"/才能比;
& lt;才能swiper 时间=?“,disable-touch :当前=癱urrentIndex",在
,,& lt; swiper-item>
,,,& lt; scroll-view scroll-y 比;
,,,,& lt; home /比;
,,,& lt;/scroll-view>
,,& lt;/swiper-item>
,,& lt; swiper-item>
,,,& lt; todo-page /比;
,,& lt;/swiper-item>
,,& lt; swiper-item>
,,,& lt; launch-task /比;
,,& lt;/swiper-item>
,,& lt; swiper-item>
,,,& lt; my-page /比;
,,& lt;/swiper-item>
& lt;才能/swiper>
,& lt;/view>
& lt;/template>
安装(),{=,,this.tabbarHeight getApp .globalData.tabbarHeight ()
}，
getCurrentIndex (e), {=,this.currentIndex e;
}
利用uni-app怎么对底部导航栏进行自定义?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
1。tabbar组件
2。引入
这里使用的是偷窃者,持续时间为0是为了关闭页面切换动画效果,
看完上述内容,你们掌握利用uni-app怎么对底部导航栏进行自定义的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
