小程序实现自定义导航栏

1. 组件nav的WXML
　　<view class='nav-wrapper'>
　　　　<text wx:if="{{showBack}}" class='iconfont icon-fanhui nav-back' catchtap='onRouteBack'></text>
　　　　<view class='nav-title'>{{title}}</view>
　　</view>
2. 组件nav的JS
Component({
　　properties: {
　　　　title:{
　　　　　　type:String,
　　　　　　value:''
　　　　},
　　　　showBack:{
　　　　　　type:Boolean,
　　　　　　value:true
　　　　}
　　},
　　methods: {
　　　　onRouteBack(){
　　　　　　wx.navigateBack();
　　　　　　this.triggerEvent('back')
　　　　}
　　}
})

3. 组件nav的WXSS
.nav-wrapper{
　　width: 100%;
　　height: 132rpx;
　　display: flex;
　　justify-content: center;
　　align-items: flex-end;
　　padding-bottom: 20rpx;
　　box-sizing: border-box;
　　position: relative;
}
.nav-wrapper .nav-title{
　　font-size: 35rpx;
}
.nav-wrapper .nav-back{
　　font-size: 34rpx;
　　position: absolute;
　　left: 20rpx;
　　bottom: 25rpx;
}

4. 在页面中的使用
　　在JSON文件中
　　{
　　　　"usingComponents": {
　　　　　　"nav": "../../../components/nav/index",
　　　　　　"more-data": "../../../components/moreData/index"
　　　　},
　　　　"navigationStyle": "custom"
　　}
　在WXML文件中
　　<nav></nav>