返回上一层和返回主页的图标是svg转base4格式,由background-image引用的图片,体积小不失真易改色- 点击标题可触发
clickTitle事件
本仓库是一个使用该自定义导航的demo,整个下载并在微信开发者工具中打开运行即可查看.
引入自己项目的方式是把components/navbar目录复制到你的项目下,并按下面配置.
页面wxml
<nav-bar navbar-data="{{navbarData}}" bind:clickTitle="onClickTitle"></nav-bar>
页面js
//组件依赖的数据
data: {
navbarData: {
title: 'Index', //标题
showCapsule: true, //是否显示左上角返回按钮
homePage:'', //tabbar主页url地址,不传或是传空字串那点主页按钮的效果就是返回上一层
}
}同时依赖全局变量
app.globalData.navbarTop
app.globalData.isFromShareapp.js
onLaunch(options) {
let sysInfo = wx.getSystemInfoSync()
//顶部导航栏top偏置，iphone8p: 20+4 ; mi5: 24+8
this.globalData.navbarTop = (sysInfo.statusBarHeight + ((sysInfo.system.toLowerCase().indexOf('ios') > -1) ? 4 : 8))
}
// 判断是否由分享进入小程序
this.globalData.isFromShare = ([1007, 1008].indexOf(options.scene) > -1) ? true : false
//内容块的top偏置,顶头导航组件设置的高度是34px, 内容块与它间隙1px,所以top偏置35px
this.globalData.contentTop = this.globalData.navbarTop + 35
//内容块可视高度,内容块与下方小程序自带的tabbar距离3px,加上overflow:hidden后保证整个页面不会垂直滚动,这个值可以看需求微调
this.globalData.contentHeight = sysInfo.windowHeight - this.globalData.contentTop - 3app.json
"usingComponents": {
"nav-bar": "/components/navbar/index"
},首页
子页
- 导航栏的大小(如高度)不应随屏幕大小的改变而改变,因此应避免使用
rpx单位 - 导航栏设置默认高度为34px, 4D68 程序右上角自带的胶囊一般高度是32px,正常情况自定导航栏向下超过胶囊2px