微信小程序開(kāi)發(fā)中怎么自定義膠囊的樣式

這篇文章給大家介紹微信小程序開(kāi)發(fā)中怎么自定義膠囊的樣式，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

1、 將app.js 中的 window 對(duì)象屬性navigationStyle 改為自定義

"window": {
 "navigationStyle": "custom"
 },

改完之后的效果:

2、獲取 右上角膠囊的定位信息 設(shè)置

調(diào)用 wx.getMenuButtonBoundingClientRect() 函數(shù)得到右上角膠囊定位信息

所需要的 屬性有 ： top,height屬性，用于計(jì)算自定義左上角膠囊定位的位置

拿到 右上角膠囊的 top和height 相加得到 屏幕導(dǎo)航欄的固定高度:

在 data函數(shù)中聲明一個(gè)導(dǎo)航欄高度屬性，和一個(gè) 膠囊具體定位的top屬性:

賦值導(dǎo)航欄的高度 數(shù)據(jù):

// pages/testQ/index.js
Page({

 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 navHeight:0,
 capsuleTop: 0

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
 */
 onShow: function () {
 let dwObj = wx.getMenuButtonBoundingClientRect()
 let navHeight_ = (dwObj.top + dwObj.height)
 let capsuleTop_ = dwObj.top
 this.setData(
 {
 navHeight: navHeight_,
 capsuleTop:capsuleTop_

 }
 )
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
 */
 onUnload: function () {

 },

 /**
 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 頁(yè)面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {

 },

 /**
 * 用戶點(diǎn)擊右上角分享
 */
 onShareAppMessage: function () {

 }
})

在 wxml 中定義 導(dǎo)航欄:

<!--pages/testQ/index.wxml-->

<!-- 左上角膠囊開(kāi)始-->
<!--left-capsule 是最上層，可以設(shè)置背景-->
<view class="left-capsule">
 <!--left-capsule-nav 是用于定位左上角的位置-->
 <view class="left-capsule-nav" >
 <!--left-capsule-nav-content 是 膠囊主要內(nèi)容-->
 <view  class="left-capsule-nav-content"> 
 <!--back 膠囊 返回按鈕-->
 <view class="back">
 <!-- 我這個(gè)圖標(biāo)引入的是 vant庫(kù)的icon，如果不是使用vant的話 得自定義一個(gè)icon-->
 <van-icon name="arrow-left" color="white" size="20"/>
 </view> 
 <!-- line 膠囊 中間線條-->
 <view class="line"></view> 
 <!-- home 膠囊 返回首頁(yè)按鈕-->
 <view class="home">
 <!-- 我這個(gè)圖標(biāo)引入的是 vant庫(kù)的icon，如果不是使用vant的話 得自定義一個(gè)icon-->
 <van-icon name="wap-home-o" color="white" size="20"/>
 </view> 
 </view>
 </view>
 <!-- 以上 可以 封裝成自定義組件,在引入，這個(gè)地方是 膠囊外的內(nèi)容-->
 <view class="main-content" >
 我是測(cè)試左上角膠囊
</view>
<!-- 左上角膠囊結(jié)束-->
</view>

wxss內(nèi)容:

/* 導(dǎo)航欄css開(kāi)始*/
.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;
}
/* 導(dǎo)航欄css結(jié)束*/
/* 內(nèi)容*/
.main-content{
 background-color: red;
 position: absolute;
 width: 100%;
 z-index: 1;
 
}

關(guān)于微信小程序開(kāi)發(fā)中怎么自定義膠囊的樣式就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。