小程序自定义导航栏返回主页
效果图在app.js中获取状态栏的高度statusBarHeight自定义组件navbar.wxml自定义组件navbar.wxss自定义组件navbar.json自定义组件navbar.js调用组件的页面.json调用组件的页面.wxml效果图
在app.js中获取状态栏的高度statusBarHeight
globalData: {statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']}
自定义组件navbar.wxml
<view class="custom " style="padding-top:{{statusBarHeight}}px"><view class='title-container'><view class='capsule' wx:if="{{ back || home }}"><view bindtap='back' wx:if="{{back}}"><image src='img/back.svg'></image></view><view bindtap='backHome' wx:if="{{home}}"><image src='img/home.svg'></image></view></view><view class='title'>{{navigationBarTitle}}</view></view></view><view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>
自定义组件navbar.wxss
.custom{position: fixed;width: 100%;top: 0;left: 0;height: 45px;background: #1d8be8;z-index: 999;}.title-container {height: 44px;display: flex;align-items: center;position: relative;}.capsule {margin-left: 10px;height: 32px;border: 1px solid #fff;border-radius: 16px;display: flex;align-items: center;}.capsule > view {width: 32px;height: 60%;position: relative;}.capsule > view:nth-child(2) {border-left: 1px solid #fff;}.capsule image {width: 60%;height: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}.title {color: white;position: absolute;left: 104px;right: 104px;font-size: 14px;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
自定义组件navbar.json
{"component": true}
自定义组件navbar.js
const app = getApp()Component({properties: {navigationBarTitle: {type: String,value: ''},back: {type: Boolean,value: false},home: {type: Boolean,value: false}},data: {statusBarHeight: app.globalData.statusBarHeight},methods: {backHome: function () {wx.reLaunch({url: '/pages/index/index',})},back: function () {wx.navigateBack({delta: 1})}}})
调用组件的页面.json
{"usingComponents": {"navBar": "/pages/common/navbar/navbar",},"navigationStyle": "custom",//导航栏样式，custom 模式可自定义导航栏，只保留右上角胶囊状的按钮."navigationBarBackgroundColor": "#1D8BE8","navigationBarTextStyle": "white"}
调用组件的页面.wxml
<navBar back home navigationBarTitle="{{navigationBarTitle}}"></navBar>
