⼩程序系列之⾃定义顶部导航功能
具备基础
vue框架：
mpvue框架：
全局配置
•到全局的app.json⽂件，在配置中添加如下内容：
"navigationStyle": "custom"
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black",
"navigationStyle": "custom" // 这个配置
}
组件思维
•使⽤mpvue开发⼩程序，src⽬录下默认会⽣成⼀个components⽂件夹；
•由于⾃定义组件所有webview页⾯都要使⽤，所以把它归类为公共组件；
•可以在components⽂件夹下新建⼀个common⽂件夹，专门放置公共组件，如下：
├── src                    源码⽬录
│├── main.js            ⼊⼝js⽂件
│├── app.json            全局配置
│├── components          组件⽬录
││└── common          公共组件
└── topBar.vue  顶部⾃定义导航复制代码
组件内容
•由于不同设备statusBarHeight值可能有差异，⾃定义组件的⾼度取决于statusBarHeight值；
•到全局App.vue⽂件，在这⾥⾯执⾏⼩程序的onLaunch⽣命周期（监听⼩程序初始化）；
•具体获取⽅法如下：
const that = this
let systemInfo = wx.getSystemInfoSync()
that.setBarHeight(systemInfo.statusBarHeight)
• 通过vuex存储statusBarHeight值，不清楚vuex如何在⼩程序中使⽤的可参考mpvue如何使⽤vuex；
•.vue⽂件的html相关结构如下：
<template>
<div class="top-bar">
<div class="bar" :>
<span class="title">{{title}}</span>
<button v-if="way && way==='/pages/mine/main'" open-type="getUserInfo" @getuserinfo="toMine">
<image class="icon" :src="icon" />
</button>
<image v-else-if="way && way!=='/pages/mine/main'" class="icon-back" :src="icon" @tap="toPage(way)" />
<span v-else></span>
</div>
<p class="place-holder" :></p>
</div>
</template>
•结构分析如下，可看做两部分，⼀部分是fixed定位在顶部的class="bar"的div；另⼀部分是class="place-holder"的p；•之所以要放⼀个p标签，是因为不⽤每次引⼊topBar.vue时都要考虑class="bar"的div都会遮挡内容区的问题；
•因此将p标签height:80rpx；加上padding-top的6px；正好等于class="bar"的div的⾼度；
•由于项⽬中左边放置的是进⼊个⼈中⼼的功能，所以左边头像必须使⽤button来出发获取⽤户信息的授权；
•同时需要考虑到左边不是头像的情况，这时就可以⽤到vue的props属性，具体props值，看下⾯代码，默认是给向左的箭头，表⽰返回上⼀页；
props: {
title: {
type: String,
required: true
},
icon: {
type: String,
default: require('@static/icon/icon_back.png')
},
way: {
type: String,
导航页源码
default: null
}
}
•如果way啥也不传则左侧不显⽰任何icon；
•如果way传⼊的是进⼊个⼈中⼼的路由，则⾛button结构上⾯的事件；
•如果way传⼊的是‘back'，则显⽰返回的向左箭头。
问题总结
•该公共topBar.vue组件对ipad不能有效适配；
•fixed定位在安卓⼿机上下拉刷新时，结构会跟着下拉，例如本⽂的⾃定义导航，下拉刷新的时候导航会跟着下拉然后再fixed 到顶部（开发者⼯具上没问题，真机有问题）；
以上所述是⼩编给⼤家介绍的⼩程序系列之⾃定义顶部导航功能，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。