微信小程序自定義頂部組件customHeader的示例代碼
更新時(shí)間：2020年06月03日 11:38:11 作者：tony康
這篇文章主要介紹了微信小程序自定義頂部組件customHeader的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1、開啟配置自定義頂部
{
"window": {
"navigationStyle":"custom"
}
}
在app.json的文件window配置"navigationStyle": "custom"屬性即可
2、自定義頂部計(jì)算原理
2.1 獲取系統(tǒng)狀態(tài)欄的高度和屏幕寬度
使用wx.getSystemInfo這個(gè)函數(shù)獲取系統(tǒng)狀態(tài)欄的高度和屏幕寬度。
2.2 獲取右上角膠囊位置信息
使用wx.getMenuButtonBoundingClientRect()方法獲取右上角膠囊位置信息。
關(guān)鍵問題在于自定義膠囊的上、下和左邊距。
2.3 自定義頂部距離計(jì)算代碼
app.js代碼如下
App({
// 小程序初始化
onLaunch: function() {
// 獲取自定義頂部高度相關(guān)參數(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>
<!-- 標(biāo)題 -->
<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;
}
/* 標(biāo)題 */
.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個(gè)樣式，meneFlag是菜單的。backHomeFlag是“返回+首頁”樣式的。
json配置
{
"usingComponents": {
"customHeader": "/components/customHeader/index"
}
}
5、小結(jié)
此組件兼容性，可以兼容安卓、IOS、劉海屏，如果你們測試出來有新bug，可以在gitHub提出issues，幫助您解決。
鏈接在此：
微信小程序自定義頂部組件
到此這篇關(guān)于微信小程序-自定義頂部組件customHeader的文章就介紹到這了,更多相關(guān)微信小程序自定義頂部組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)淺拷貝與深拷貝的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)淺拷貝與深拷貝的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript淺拷貝與深拷貝的定義與使用方法,需要的朋友可以參考下2018-07-07
解決idea開發(fā)遇到j(luò)avascript動(dòng)態(tài)添加html元素時(shí)中文亂碼的問題
這篇文章主要介紹了解決idea開發(fā)遇到j(luò)avascript動(dòng)態(tài)添加html元素時(shí)中文亂碼的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
支持多瀏覽器(IE、Firefox、Opera)剪切板復(fù)制函數(shù)_腳本之家修正版
有朋友要剪切板復(fù)制函數(shù)，可網(wǎng)上的好多代碼都是不能運(yùn)行的，各種其它符號，導(dǎo)致了腳本的不可運(yùn)行，腳本之家站長特整理了下，修正了錯(cuò)誤。2008-12-12
JavaScript進(jìn)階之函數(shù)和對象知識點(diǎn)詳解
為了讓大家更加深入地了解JavaScript。這篇文章主要介紹了JavaScript中函數(shù)和對象知識點(diǎn)，文中的示例代碼講解詳細(xì)，感興趣的可以學(xué)習(xí)一下2022-07-07
晚上要下班了老板發(fā)來一個(gè)任務(wù)：把一個(gè)300M左右的視頻壓縮到100M以內(nèi),以便在微信上發(fā)送。于是就是抽空搞了起來，下面小編把過程分享到腳本之家平臺，需要的朋友參考下吧2018-11-11
JavaScript高級程序設(shè)計(jì)（第三版）學(xué)習(xí)筆記6、7章
這篇文章主要介紹了JavaScript高級程序設(shè)計(jì)（第三版）學(xué)習(xí)筆記6、7章 的相關(guān)資料,需要的朋友可以參考下2016-03-03
javascript實(shí)現(xiàn)跨域的方法匯總
這篇文章主要給大家匯總介紹了javascript實(shí)現(xiàn)跨域的方法的相關(guān)資料,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript構(gòu)建一個(gè)主題切換器,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
js 獲取后臺的字段 改變 checkbox的被選中的狀態(tài) 代碼
js 獲取后臺的字段 改變 checkbox的被選中的狀態(tài) 代碼，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了js讀取csv文件并使用json顯示出來,需要的朋友可以參考下2015-01-01