微信小程序自定義頂部組件customHeader的示例代碼
更新時(shí)間：2020年06月03日 11:38:11 作者：tony康
這篇文章主要介紹了微信小程序自定義頂部組件customHeader的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(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、劉海屏，如果你們測(cè)試出來有新bug，可以在gitHub提出issues，幫助您解決。
鏈接在此：
微信小程序自定義頂部組件
到此這篇關(guān)于微信小程序-自定義頂部組件customHeader的文章就介紹到這了,更多相關(guān)微信小程序自定義頂部組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了JavaScript中的AJAX的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
javascript對(duì)HTML字符轉(zhuǎn)義與反轉(zhuǎn)義
這篇文章主要介紹了javascript對(duì)HTML字符轉(zhuǎn)義與反轉(zhuǎn)義，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
借助JavaScript腳本判斷瀏覽器Flash Player信息的方法
做了一個(gè)小的Demo，在測(cè)試時(shí)發(fā)現(xiàn)經(jīng)常報(bào)錯(cuò)，對(duì)此總結(jié)了一下借助JavaScript腳本判斷瀏覽器Flash Player信息的方法,需要的朋友可以參考下2014-07-07![實(shí)例分析Array.from(arr)與[...arr]到底有何不同](http://img.jbzj.com/images/xgimg/bcimg3.png)
實(shí)例分析Array.from(arr)與[...arr]到底有何不同
這篇文章通過實(shí)例主要給大家分析介紹了關(guān)于Array.from(arr)與[...arr]到底有何不同的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScrip實(shí)現(xiàn)一個(gè)有時(shí)間限制的緩存類的方式
本文將探索 JavaScript 中一種基于自動(dòng)過期機(jī)制的時(shí)間限制緩存實(shí)現(xiàn)方式,提高數(shù)據(jù)緩存策略的靈活性和效率,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
微信小程序?qū)崿F(xiàn)時(shí)間戳格式轉(zhuǎn)換
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間戳格式轉(zhuǎn)換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
javascript replace()方法的簡(jiǎn)單分析
javascript中replace()在javascript中，String的函數(shù)replace()簡(jiǎn)直太讓人喜愛了。它靈活而強(qiáng)大的字符替換處理能力，讓我不禁想向大家介紹它。2008-11-11
JavaScript-html標(biāo)題滾動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狫avaScript-html標(biāo)題滾動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁面元素css樣式實(shí)現(xiàn)切換功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
微信小程序?qū)崿F(xiàn)圖片拖拽調(diào)換位置效果(開箱即用)
本篇文章給大家介紹如何在微信小程序中實(shí)現(xiàn)圖片的拖拽排序和刪除功能,通過創(chuàng)建自定義組件并使用示例代碼,代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧2024-12-12