注釋:自定義導航需要自備相應圖片
一、設置自定義頂部導航
Navigation是小程序的頂部導航組件,當頁面配置navigationStyle
設置為custom
的時候可以使用此組件替代原生導航欄。
1.全局頂部導航自定義,在app.json的“window”里添加"navigationStyle": "custom"
2.只在某一個頁面自定義頂部導航,在該頁面的json文件里添加"navigationStyle": "custom"
二、獲取手機屏幕數據,app.js
//app.js
const Utils = require('./utils/utils')
App({
onLaunch: function () {
// 獲取屏幕參數
try {
const res = wx.getSystemInfoSync()
if (res.platform == 'ios') {
this.globalData.platform = 'ios'
} else if (res.platform == 'android') {
this.globalData.platform = 'android'
}
// 導航高度
let navHeight = res.statusBarHeight
// 屏幕寬度/高度,單位px
this.globalData.screenWidth = res.screenWidth
this.globalData.screenHeight = res.screenHeight
// 狀態欄的高度,單位px
this.globalData.statusBarHeight = res.statusBarHeight
// 設備像素比
this.globalData.pixelRatio = res.pixelRatio
// 可使用窗口寬度,單位px
this.globalData.winWidth = res.windowWidth
// 安卓時,膠囊距離狀態欄8px,iOS距離4px
if (res.system.indexOf('Android') !== -1) {
this.globalData.navHeight = navHeight + 14 + 32
this.globalData.navTitleTop = navHeight + 8
// 視窗高度 頂部有占位欄時
this.globalData.winHeight = res.screenHeight - navHeight - 14 - 32
// tab主頁視窗高度
this.globalData.winHeightTab = res.windowHeight - navHeight - 14 - 32
} else {
this.globalData.navHeight = navHeight + 12 + 32
this.globalData.navTitleTop = navHeight + 4
// 視窗高度 頂部有占位欄時
this.globalData.winHeight = res.screenHeight - navHeight - 12 - 32
// tab主頁視窗高度
this.globalData.winHeightTab = res.windowHeight - navHeight - 12 - 32
}
console.log(wx.getSystemInfoSync(), this.globalData.winHeightTab)
} catch (e) {
console.log(e)
}
},
globalData: {
platform: 'ios',
pixelRatio: 2,
statusBarHeight: 20,
navHeight: 64,
navTitleTop: 26,
winHeight: 655,
winWidth: 750,
screenWidth: 375,
screenHeight: 812
}
})
三、封裝導航組件,根目錄創建components/navbar文件夾,創建Component
<!--navbar.wxml--> <view> <view class="nav-bar {{isWhite=='true'?'nav-bar-white':''}}" style="height: {{navHeight}}px;background-color:{{navColor}};" catchtap="toTop"> <text class="navbar-title" style="top:{{navTitleTop}}px;color:{{navTitleColor}};">{{navTitle}}</text> <view wx:if="{{noArrow=='false'&&isArrowWhite=='false'&&isNavHome=='false'}}" catchtap="navBack" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;"> <image class="navbar-icon" src="../../images/arrow_left.png"></image> </view> <view wx:if="{{isArrowWhite=='true'&&isNavHome=='false'&&noArrow=='false'}}" catchtap="navBack" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;"> <image src="../../images/arrow_left_white.png" class="navbar-icon"></image> </view> <view wx:if="{{isNavHome=='true'&&isArrowWhite=='false'&&noArrow=='false'}}" catchtap="navHome" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;"> <image src="../../images/Home@3x.png" class="navbar-icon"></image> </view> <view wx:if="{{isNavHome=='true'&&isArrowWhite=='true'&&noArrow=='false'}}" catchtap="navHome" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;"> <image src="../../images/Home@3x_white.png" class="navbar-icon"></image> </view> </view> <view wx:if="{{isWhite=='true'}}" class="nav-bar-place" style="height: {{navHeight}}px;background-color:{{navColor}};"></view> </view>
// navbar.js
const app = getApp()
Component({
/**
* 組件的屬性列表
*/
properties: {
navHeight: {
type: Number,
value: 20
},
navTitleTop: {
type: Number,
value: 26
},
navTitle: { // 導航標題 可以為空
type: String,
value: ''
},
navTitleColor: { // 導航標題顏色 默認黑色
type: String,
value: '#000'
},
isWhite: { // 是否為白底
type: String,
value: 'true'
},
noArrow: { // 取消返回箭頭
type: String,
value: 'false'
},
isArrowWhite: {//白色箭頭
type: String,
value: 'false'
},
isNavHome: { // 返回首頁
type: String,
value: 'false'
},
navColor: { // 導航欄背景色 默認白色
type: String
},
backPath: { // 返回頁面路徑
type: String,
default: ''
},
backDelta: { // 返回頁面層數
type: Number,
default: 1
}
},
/**
* 組件的初始數據
*/
data: {
navHeight: 0,
navTitleTop: 0
},
attached() {
// 在組件實例進入頁面節點樹時執行
// 獲取頂部導航高度
this.setData({
navHeight: app.globalData.navHeight,
navTitleTop: app.globalData.navTitleTop
})
},
/**
* 組件的方法列表
*/
methods: {
// 回到首頁
navHome:function(){
wx.switchTab({
url: '/pages/index/index'
})
},
// 回到頂部
toTop: function () {
wx.pageScrollTo({
scrollTop: 0,
duration: 300
})
this.triggerEvent('scrollEvent', {}) // 可綁定點擊標題欄時的事件
},
// 返回上一頁
navBack: function () {
if (this.properties.backPath === '') {
wx.navigateBack({
delta: this.properties.backDelta
})
} else {
wx.redirectTo({
url: this.properties.backPath
})
}
this.triggerEvent('backEvent', {}) // 可綁定點擊返回時的事件
}
}
})
/* navbar.wxss */ /*自定義導航欄*/ .nav-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999; } .nav-bar-white { background-color: #fff; } .navbar-title { position: absolute; height: 32px; line-height: 32px; /* width: 100%; */ width: 320rpx; text-align: center; font-size: 16px; color: #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; left: 28%; } .navbar-icon-wrap { position: absolute; left: 9px; width: 44px; height: 32px; display: flex; justify-content: center; align-items: center; } .navbar-icon { width: 44px; height: 32px; } .navbar-scan { width: 28px; height: 28px; }
四、引入組件(頁面的json文件)
五、使用組件(根據屬性可以自由配置導航,這里例舉幾個樣式,也可以根據自己需求更改組件)
<navbar navTitle="頂部導航demo" style="width:200rpx;"></navbar>
—————————————————————————————————
<navbar navTitle="無返回頂部導航" noArrow="true"></navbar>
—————————————————————————————————
<navbar navTitle="透明導航" isWhite="false" isArrowWhite='true' navTitleColor="#fff"></navbar>
—————————————————————————————————
<navbar navTitle="主頁按鈕導航" isNavHome='true' isArrowWhite='false' noArrow='false'></navbar>