有基础

Vue框架：vue官方文件

Mpvue框架：mpvue官方文件

全局配置

找到全局app.json文件，并在配置中添加以下内容：

navigation style ' : ' custom ' ' window ' : { ' backgroundTextStyle ' : ' light '，' navigationBarBackgroundColor ' : ' # fff '，组件思维的'导航栏标题文字' : '微信'，'导航栏文字样式' 3360' black '，'导航样式' :' custom'/此配置}

使用mpvue开发小程序，默认会在src目录下生成一个components文件夹；因为自定义组件的所有webview页面都需要使用，所以它被分类为公共组件。您可以在“组件”文件夹下创建一个新的公共文件夹来放置公共组件，如下所示：

src源码目录 main.js入口js文件 app.json全局配置 组件组件目录 通用公共组件 topBar.vue top自定义导航复制代码

组件内容

因为不同设备的statusBarHeight值可能不同，所以自定义组件的高度取决于statusBarHeight值；找到全局App.vue文件，执行小程序的onLaunch生命周期(监控小程序的初始化)；具体采集方法如下：

const that=this let system info=wx . getsysteminfosync(). setbar height(system info . statusBarHeight)通过vuex存储status barheight值，但不清楚vuex在小程序中是如何使用的。作为参考，mpvue可以使用vuex。的Html相关结构。vue文件如下：

模板div class=' top-bar ' div class=' bar ' : style=' height : '(system info . bar height 46)' px；' span class=' title ' { title } }/span button v-if=' way=='/pages/mine/main ' ' open-type=' getUserInfo ' @ getUserInfo=' toMine ' image class=' icon ' : src=' http : icon '/button image v-else-if=' way！=='/pages/mine/main ' ' class=' icon-back ' : src=' http : icon ' @ tap=' toPage(way)'/span v-else/span/div p class=' place-holder ' : style=' padding-top : '(system info . bar height 6)' px；/p/div/模板的结构分析如下，可视为两部分。一部分是顶部固定有class='bar '的div另一部分是p，class=' place-holder '；放p标签的原因是不需要考虑每次引入topBar.vue时class='bar '的div会阻塞内容区的问题；因此，p标签高度为：80 rpx；添加6px的填充-顶部；完全等于div的高度，class=' bar

因为进入个人中心的功能放在项目左侧，左侧头像必须使用按钮才能获得用户信息的授权；同时要考虑左侧不是头像。这时可以使用vue的道具属性，具体的道具值，看下面的代码，默认是给出左箭头，表示返回上一页；

prop : { title : { type : String，required: true }，icon: { type: String，default : require(' @ static/icon/icon _ back . png ')}，Way: {Type: String，Default3360 NULL}}如果Way不传递任何内容，则没有图标；将显示在左侧；如果途径输入的路线是进入个人中心，则转到按钮结构上方的事件；如果“返回”是通过方式传入的，将显示返回的左箭头。

问题总结

公共的topBar.vue组件无法有效地适应ipad当固定定位在安卓手机上下拉刷新时，结构也会跟着下拉，比如本文的自定义导航。下拉刷新时，导航会跟着下拉然后固定到顶部(开发者工具上没有问题，实机有问题)；

以上是边肖推出的微信小程序系列的自定义顶部导航功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！