vant自带的导航栏左侧箭头需要自己添加方法,但是在实际开发很多页面需要返回上一页,每次都要重写返回方法很麻烦,封装成一个单独组件会方便很多,样式也可以自己直接调节。
wxml:
<van-nav-bar title="{{title}}" left-arrow="{{leftArrow}}" border="{{border}}" fixed="{{fixed}}" placeholder="{{placeholder}}"
bind:click-left="onClickLeft" custom-class="{{customClass}}" custom-style="{{customStyle}}" />
js:
// pages/components/custom-nav-bar/custom-nav-bar.js
Component({
/**
* 组件的属性列表
*/
properties: {
title:{
type: String,
value: '',
},
border:{
type: Boolean,
value: true,
},
fixed:{
type: Boolean,
value: true,
},
placeholder:{
type: Boolean,
value: true,
},
leftArrow:{
type: Boolean,
value: false,
},
customStyle:{
type: String,
value: '',
},
customClass:{
type: String,
value: '',
}
},
options: {
styleIsolation: 'shared',
},
/**
* 组件的初始数据
*/
data: {
title:'',
border:true,
fixed:true,
placeholder:true,
leftArrow: false,
customStyle:'',
customClass:'',
},
/**
* 组件的方法列表
*/
methods: {
onClickLeft(){
wx.navigateBack({
delta: 1
})
}
}
})
json:
{
"component": true,
"usingComponents": {}
}
由于常用,所以直接在app.json 的 usingComponents 引用就可以全局调用了
"usingComponents":{"custom-nav-bar": "pages/components/custom-nav-bar/custom-nav-bar",}
在页面调用:
<custom-nav-bar title="标题" left-arrow />