uniapp和vue3+ts实现自定义头部导航栏左侧胶囊内容

由于某些原因,可能需要我们自己定义头部导航栏的内容,实现各种设计师画的设计稿,所以就需要这个自定义的组件,实现的内容:自定义标题和左侧胶囊图标内容,也可以自定义搜索内容到里面,实现的效果图:

uniapp和vue3+ts实现自定义头部导航栏左侧胶囊内容_第1张图片

实现步骤

1.先在pages中将这个页面的导航设置为自定义

 "navigationStyle": "custom"

uniapp和vue3+ts实现自定义头部导航栏左侧胶囊内容_第2张图片

2.在app.vue中获取头部高度

uniapp和vue3+ts实现自定义头部导航栏左侧胶囊内容_第3张图片

源代码:



3.实现自定义头部组件

uniapp和vue3+ts实现自定义头部导航栏左侧胶囊内容_第4张图片源代码: 








4.在组件中使用

uniapp和vue3+ts实现自定义头部导航栏左侧胶囊内容_第5张图片

最终的效果: uniapp和vue3+ts实现自定义头部导航栏左侧胶囊内容_第6张图片

你可能感兴趣的:(多端开发,uni-app)