首先查看官方文檔知識(shí)點(diǎn)
1侥猩、什么情況可自定義？怎么自定義抵赢？
1616654271860.jpg
1616654322744.jpg
具體代碼如下：
在app.json文件中
"window": {
"navigationStyle": "custom"
},
全局引用再在app.json文件中加入如下兩行
"usingComponents": {
"navigationBar": "./components/navigationBar/navigationBar"
},
僅單個(gè)頁(yè)面引用就只在單個(gè)頁(yè)面的app.json種引用上面usingComponents
再看官方文檔知識(shí)點(diǎn)
2欺劳、怎么使用components？
1616654397827.jpg
創(chuàng)建一個(gè)components文件夾存儲(chǔ)所有的自定義組件铅鲤，再創(chuàng)建一個(gè)navigationBar的文件夾組件划提。
注：每個(gè)機(jī)型的狀態(tài)欄高度不是固定的，在app.js啟動(dòng)時(shí)可獲取狀態(tài)欄高度并存入global全局data中可供自定義組件動(dòng)態(tài)設(shè)置導(dǎo)航欄高度
//獲取系統(tǒng)信息
wx.getSystemInfo({
success(res) {
that.globalData.statusBarHeight = res.statusBarHeight;
},
});
navigationBar.js
const app = getApp()
Component({
properties: {
title: {
type: String,
value: ''
},
back: {
type: Boolean,
value: true
},
backHome: {
type: Boolean,
value: false
}
},
data: {
statusBarHeight: app.globalData.statusBarHeight + 'px',
navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
},
methods: {
backHome: function () {
let pages = getCurrentPages()
wx.navigateBack({
delta: pages.length
})
},
back: function () {
wx.navigateBack({
delta: 1
})
}
}
})
navigationBar.wxml
<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
<view style="{{'height: ' + statusBarHeight}}"></view>
<view class='title-container'>
<view class='capsule' wx:if="{{ back || backHome }}">
<view bindtap='back' wx:if="{{back}}">
<image src='/images/arrow_white.png'></image>
</view>
<view bindtap='backHome' wx:if="{{backHome}}">
<image src='/images/arrow_blue.png'></image>
</view>
</view>
<view class='title'>{{title}}</view>
</view>
</view>
navigationBar.wxss
.navbar {
width: 100%;
background-color: pink;
/* position: fixed; */
top: 0;
left: 0;
z-index: 999;
}
.title-container {
height: 40px;
display: flex;
align-items: center;
position: relative;
}
.capsule {
margin-left: 10px;
height: 30px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 16px;
display: flex;
align-items: center;
}
.capsule > view {
width: 45px;
height: 60%;
position: relative;
}
.capsule > view:nth-child(2) {
border-left: 1px solid #fff;
}
.capsule image {
width: 50%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.title {
color: white;
position: absolute;
top: 6px;
left: 104px;
right: 104px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
3彩匕、自定義導(dǎo)航欄已設(shè)置腔剂，自定義組件已創(chuàng)建，那么剩下去父組件中引用自定義的子組件了驼仪。
<navigationBar title="ddddd" backHome="true"></navigationBar>
這個(gè)title和backHome都是子組件中properties里定義的需要傳入的參數(shù)掸犬。
