关于uniapp自定义底部导航栏

 昨天技术组长让我用uniapp做一个h5的页面,但是设计给的设计图底部的tabbar是这样的

关于uniapp自定义底部导航栏_第1张图片

 

 自己以前都是用uniapp自带的tabbar,于是乎就研究了一下如何自定义一个tabbar的组件

1.首先去components文件夹下创建tabbar.vue组件

关于uniapp自定义底部导航栏_第2张图片

 2.先在data中定义一个数据,里面填写自己所用到的底部点击按钮,其中包括名字,选中图片的路径,未选中的图片的路径和点击之后跳转的页面。然后模板中渲染。通过prop中current的值去判断你点击了哪一个页面。



css样式:用fixed固定在底部


3.写好tabbar组件之后,需要去main.js中去定义成全局组件

 4.之后你就可以在你的页面中使用了

比如我想点击tabbar的首页能激活,就需要在你的首页中给全局定义的tabbar传递一个currtent=0

关于uniapp自定义底部导航栏_第3张图片

 

 

 

 

 

你可能感兴趣的:(uni-app,前端)