微信小程序自定義頂部組件customHeader的示例代碼

更新時間：2020年06月03日 11:38:11 作者：tony康

這篇文章主要介紹了微信小程序自定義頂部組件customHeader的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

1、開啟配置自定義頂部

在這里插入圖片描述

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

在app.json的文件window配置"navigationStyle": "custom"屬性即可

2、自定義頂部計算原理

2.1 獲取系統(tǒng)狀態(tài)欄的高度和屏幕寬度

使用wx.getSystemInfo這個函數(shù)獲取系統(tǒng)狀態(tài)欄的高度和屏幕寬度。

在這里插入圖片描述

2.2 獲取右上角膠囊位置信息

使用wx.getMenuButtonBoundingClientRect()方法獲取右上角膠囊位置信息。
關鍵問題在于自定義膠囊的上、下和左邊距。

在這里插入圖片描述

2.3 自定義頂部距離計算代碼

app.js代碼如下

App({
 // 小程序初始化
 onLaunch: function() {
 // 獲取自定義頂部高度相關參數(shù)
 let capsuleObj = wx.getMenuButtonBoundingClientRect();
 // console.log("==膠囊信息==");
 // console.log(capsuleObj);

 wx.getSystemInfo({
 success: (res) => {
 // console.log("==獲取系統(tǒng)信息==");
 // console.log(res)
 var statusBarHeight = res.statusBarHeight; //頂部狀態(tài)欄高度

 this.globalData.capsuleObj = capsuleObj;
 this.globalData.titleHeight = statusBarHeight + capsuleObj.height + (capsuleObj.top - statusBarHeight) * 2;
 },
 failure() {
 }
 })
 },

 // 全局緩存
 globalData: {
 loginStatus: false,
 },
})

3、封裝自定義頂部

3.1效果圖展示

在這里插入圖片描述

3.2組件代碼

index.wxml

<!--components/customHeader/index.wxml-->
<view class="customHeader_box" style="height:{{titleHeight}}px; background-color:{{bgColor}};">
 <!-- 菜單 -->
 <view wx:if="{{menuFlag}}" class="menu_box" style="height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;">
 <view class="customIcon" bindtap="meunClick">
 <image src="/images/customMenu.png"></image>
 </view>
 </view>

 <!-- 返回+首頁 -->
 <view wx:if="{{backHomeFlag}}" class="backHome_box" style="width:{{capsuleObj.width}}px; height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;">
 <view class="customIcon backIcon" bindtap="backClick">
 <image src="/images/customBack.png"></image>
 </view>
 <view class="customIcon homeIcon" bindtap="homeClick">
 <image src="/images/customHome.png"></image>
 </view>
 </view>

 <!-- 標題 -->
 <view class="customHeader_title" style="top:{{capsuleObj.top}}px; height:{{capsuleObj.height}}px; line-height:{{capsuleObj.height}}px;">
 {{customTitle}}
 </view>
</view>

<!-- 自定義頂部距離修正 -->
<view class="customWrap" style="height:{{titleHeight}}px;"></view>

index.wxss

/* components/customHeader/index.wxss */

.customHeader_box {
 width: 100%;
 overflow: hidden;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 99999;
}

.customIcon {
 flex: 1;
}

.customIcon image {
 width: 30rpx;
 height: 30rpx;
}

/* 菜單 */
.menu_box{
 text-align: center;
 box-sizing: border-box;
 overflow: hidden;
 position: absolute;
 left: 10px;
 z-index: 11;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.menu_box .customIcon image{
 width: 36rpx;
 height: 36rpx;
}

/* 返回+首頁 */

.backHome_box {
 text-align: center;
 border: 1px solid #e5e5e5;
 border-radius: 20px;
 box-sizing: border-box;
 overflow: hidden;
 position: absolute;
 left: 10px;
 z-index: 11;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.backIcon {
 border-right: 1rpx solid #e5e5e5;
}

/* 標題 */

.customHeader_title {
 width: 100%;
 padding-left: 115px;
 padding-right: 115px;
 text-align: center;
 font-size: 32rpx;
 font-weight: bold;
 color: #333;
 text-overflow: ellipsis;
 box-sizing: border-box;
 overflow: hidden;
 white-space: nowrap;
 position: absolute;
 left: 0;
 z-index: 10;
}

/* 自定義頂部距離修正 */
.customWrap{
 width: 100%;
 position: relative;
 left: 0;
 z-index: 99998;
}

index.js

// components/customHeader/index.js
const app = getApp();

Component({
 /**
 * 組件的屬性列表
 */
 properties: {
 customTitle: String,
 bgColor: {
 type: String,
 value: '#fff'
 },
 menuFlag: {
 type: Boolean,
 value: false
 },
 backHomeFlag: {
 type: Boolean,
 value: false
 },
 },

 /**
 * 組件的初始數(shù)據(jù)
 */
 data: {

 },

 attached: function() {
 this.setData({
 titleHeight: app.globalData.titleHeight,
 capsuleObj: app.globalData.capsuleObj
 })
 },

 options: {
 multipleSlots: true, //開啟多slot
 },

 /**
 * 組件的方法列表
 */
 methods: {
 // 菜單
 meunClick: function () {
 wx.navigateTo({
 url: '/pages/menu/menu',
 })
 },

 // 返回
 backClick: function() {
 wx.navigateBack({
 delta: 1
 })
 },
 
 // 回首頁
 homeClick: function() {
 wx.navigateTo({
 url: '/pages/index/index'
 })
 },
 }
})

index.json

{
 "component": true
}

4、組件使用方法

index.wxml

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

<!-- 自定義頂部 -->
<customHeader menuFlag customTitle="首頁"></customHeader>

<view class="url">
	<navigator hover-class="none" url="../child/child">跳到子頁</navigator>
</view>

ps：我這邊封裝了2個樣式，meneFlag是菜單的。backHomeFlag是“返回+首頁”樣式的。

json配置

{
 "usingComponents": {
 "customHeader": "/components/customHeader/index"
 }
}

5、小結

此組件兼容性，可以兼容安卓、IOS、劉海屏，如果你們測試出來有新bug，可以在gitHub提出issues，幫助您解決。

鏈接在此：
微信小程序自定義頂部組件

到此這篇關于微信小程序-自定義頂部組件customHeader的文章就介紹到這了,更多相關微信小程序自定義頂部組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

輕松理解JavaScript之AJAX
本文主要介紹了JavaScript中的AJAX的相關知識，具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
javascript對HTML字符轉義與反轉義
這篇文章主要介紹了javascript對HTML字符轉義與反轉義，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
借助JavaScript腳本判斷瀏覽器Flash Player信息的方法
做了一個小的Demo，在測試時發(fā)現(xiàn)經(jīng)常報錯，對此總結了一下借助JavaScript腳本判斷瀏覽器Flash Player信息的方法,需要的朋友可以參考下
2014-07-07
實例分析Array.from(arr)與[...arr]到底有何不同
這篇文章通過實例主要給大家分析介紹了關于Array.from(arr)與[...arr]到底有何不同的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-04-04
JavaScrip實現(xiàn)一個有時間限制的緩存類的方式
本文將探索 JavaScript 中一種基于自動過期機制的時間限制緩存實現(xiàn)方式,提高數(shù)據(jù)緩存策略的靈活性和效率,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-01-01
微信小程序實現(xiàn)時間戳格式轉換
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)時間戳格式轉換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
javascript replace()方法的簡單分析
javascript中replace()在javascript中，String的函數(shù)replace()簡直太讓人喜愛了。它靈活而強大的字符替換處理能力，讓我不禁想向大家介紹它。
2008-11-11
JavaScript-html標題滾動效果的簡單實現(xiàn)
下面小編就為大家?guī)硪黄狫avaScript-html標題滾動效果的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
JS+CSS實現(xiàn)仿msn風格選項卡效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)仿msn風格選項卡效果代碼,涉及JavaScript響應鼠標事件動態(tài)變換頁面元素css樣式實現(xiàn)切換功能的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
微信小程序實現(xiàn)圖片拖拽調換位置效果(開箱即用)
本篇文章給大家介紹如何在微信小程序中實現(xiàn)圖片的拖拽排序和刪除功能,通過創(chuàng)建自定義組件并使用示例代碼,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧
2024-12-12