1、 將app.js 中的 window 對象屬性navigationStyle 改為自定義
"window": {
"navigationStyle": "custom"
},
改完之后的效果:
2、獲取 右上角膠囊的定位信息 設置
調用 wx.getMenuButtonBoundingClientRect() 函數得到右上角膠囊定位信息,將定位信息賦值到全局變量中
完整 app.js
//app.js
App({
onLaunch: function () {
// 獲取 右上角膠囊定位信息
let dwObj = wx.getMenuButtonBoundingClientRect()
let height_ = (
20 + dwObj.height + dwObj.top
)
console.info(dwObj)
this.appHead.navHeight = height_
this.appHead.capsuleTop = dwObj.top
// 展示本地存儲能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登錄
wx.login({
success: res => {
// 發送 res.code 到后台換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發送給后台解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
appHead:{
navHeight: 0,
capsuleTop: 0
}
})
所需要的 屬性有 ： top,height屬性，用於計算自定義左上角膠囊定位的位置
在頁面中 拿到全局變量中的 右上角膠囊 top和height 計算好的定位數據:
在 頁面 data函數中聲明一個導航欄高度屬性，和一個 膠囊具體定位的top屬性:
賦值導航欄的高度 數據:
// pages/testQ/index.js
let app = getApp()
Page({
/**
* 頁面的初始數據
*/
data: {
navHeight : app.appHead.navHeight,
capsuleTop: app.appHead.capsuleTop
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
在 wxml 中定義 導航欄:
<!--pages/testQ/index.wxml-->
<!-- 左上角膠囊開始-->
<!--left-capsule 是最上層，可以設置背景-->
<view class="left-capsule">
<!--left-capsule-nav 是用於定位左上角的位置-->
<view class="left-capsule-nav" style="height:{{navHeight}}px;">
<!--left-capsule-nav-content 是 膠囊主要內容-->
<view style="position:relative;top:{{capsuleTop}}px;" class="left-capsule-nav-content">
<!--back 膠囊 返回按鈕-->
<view class="back">
<!-- 我這個圖標引入的是 vant庫的icon，如果不是使用vant的話 得自定義一個icon-->
<van-icon name="arrow-left" color="white" size="20"/>
</view>
<!-- line 膠囊 中間線條-->
<view class="line"></view>
<!-- home 膠囊 返回首頁按鈕-->
<view class="home">
<!-- 我這個圖標引入的是 vant庫的icon，如果不是使用vant的話 得自定義一個icon-->
<van-icon name="wap-home-o" color="white" size="20"/>
</view>
</view>
</view>
<!-- 以上 可以 封裝成自定義組件,在引入，這個地方是 膠囊外的內容-->
<view class="main-content" style="top:{{navHeight}}px;">
我是測試左上角膠囊
</view>
<!-- 左上角膠囊結束-->
</view>
wxss內容:
/* 導航欄css開始*/
.left-capsule{
width: 100vh;
height: 100vh;
background-color: black;
}
.left-capsule .left-capsule-nav{
width: 100%;
position: fixed;
z-index: 2;
}
.left-capsule-nav .left-capsule-nav-content{
width: 85px;
text-align: center;
border-radius: 50px;
position: relative;
top: 26px;
left: 20px;
box-shadow:0px 0px 1px 0.2px white;
background-color: #1d19195c;
height: 30px;
}
.left-capsule-nav-content view{
display: inline;
width: 35px;
position: relative;
}
.left-capsule-nav-content .back{
top: 4px;left: -5px;
}
.left-capsule-nav-content .line{
top: 3px;
width: 1px;
border-left: solid #cac3c3 thin;
height: 17px;
display: inline-block;
}
.left-capsule-nav-content .home{
top: 4px;
}
/* 導航欄css結束*/
/* 內容*/
.main-content{
background-color: red;
position: absolute;
width: 100%;
z-index: 1;
}
效果圖:
如果覺得紅色地方太挨得進的話 top 在加大一點