To use a custom navigation bar just configure the
Currently WeChat applet does not support individual page settings (now supported, this article is for reference only), once in to decide to use the custom navigation bar, then each page needs to be set, for convenience I wrote it as a component.
Component Catalog.
index.wxml Documents：
// 导航栏 中间的标题
{{navbarData.title}}
// 导航栏 左上角的返回按钮 和home按钮
// 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示
//左上角的返回按钮，wx:if='{{!share}}'空制返回按钮显示
//从分享进入小程序时 返回上一级按钮不应该存在
index.wxss Documents：
/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
background: #fff;
color: #000;
z-index: 9999999;
}
/* 标题要居中 */
.nav-title {
position: absolute;
text-align: center;
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 36rpx;
color: #2c2b2b;
font-weight: 600;
}
.nav-capsule {
display: flex;
align-items: center;
margin-left: 30rpx;
width: 140rpx;
justify-content: space-between;
height: 100%;
}
.navbar-v-line {
width: 1px;
height: 32rpx;
background-color: #e5e5e5;
}
.back-pre, .back-home {
width: 32rpx;
height: 36rpx;
margin-top: 4rpx;
padding: 10rpx;
}
.nav-capsule .back-home {
width: 36rpx;
height: 40rpx;
margin-top: 3rpx;
}
index.json Documents（Custom components must）：
{
"component": true
}
index.js Documents：
const app = getApp()
Component({
properties: {
navbarData: { //navbarData 由父页面传递的数据，变量名字自命名
type: Object,
value: {},
observer: function (newVal, oldVal) {}
}
},
data: {
height: '',
//默认值 默认显示左上角
navbarData: {
showCapsule: 1
}
},
attached: function () {
// 获取是否是通过分享进入的小程序
this.setData({
share: app.globalData.share
})
// 定义导航栏的高度 方便对齐
this.setData({
height: app.globalData.height
})
},
methods: {
// 返回上一页面
_navback() {
wx.navigateBack()
},
//返回到首页
_backhome() {
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
app.js Documents：
//app.js
App({
onLaunch: function (options) {
// 判断是否由分享进入小程序
if (options.scene == 1007 || options.scene == 1008) {
this.globalData.share = true
} else {
this.globalData.share = false
};
//获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
//这个最初我是在组件中获取，但是出现了一个问题，当第一次进入小程序时导航栏会把
//页面内容盖住一部分,当打开调试重新进入时就没有问题，这个问题弄得我是莫名其妙
//虽然最后解决了，但是花费了不少时间
wx.getSystemInfo({
success: (res) => {
this.globalData.height = res.statusBarHeight
}
})
},
globalData: {
share: false, // 分享默认为false
height: 0,
}
})
app.wxss Documents:
/**app.wxss**/
pages {
position: relative;
z-index: 9999998;
background: #fff;
}
How to use a custom navigation bar：
File directory diagram
In the WeChat app page：
pages Folders index.wxml Documents：
// 引入自定义组价。'navbar-data'中navbar是自定义名字，决定了组件中'navbarData'的名字
home page
pages文件夹index.json文件中(声明使用的组件，和组件的地址)：
{
"usingComponents": {
"nav-bar": "/commpents/navbar/index"
}
}
pages文件夹index.js文件：
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
// 组件所需的参数
nvabarData: {
showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
title: '我的主页', //导航栏 中间的标题
},
// 此页面 页面内容距最顶部的距离
height: app.globalData.height * 2 + 20 ,
},
onLoad() {
console.log(this.data.height)
}
})
pages Folders index.wxss Documents：
/**index.wxss**/
.home-page {
height: 160rpx;
width: 100%;
border: 1rpx solid red;
font-size: 60rpx;
}
Some problems caused by custom components, 1. Dropdown refresh: When the page content height is not high enough for the screen, the ios dropdown refresh will appear on —- and it can’t go up, and it also appears occasionally. The solution is to set a minimum page height, which is the height of the page + the height of the top content from the top when the page is refreshed.
- I forgot about 。。。。
If you guys have a better one, please let me know!
Recent Comments