위 챗 애플 릿 사용자 정의 상단 구성 요소 customeHeader 의 예제 코드

1.사용자 정의 설정 상단 오픈

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

app.json 의 파일 window 에"navigationStyle":"custom"속성 을 설정 하면 됩 니 다.
2.사용자 정의 상단 계산 원리
2.1 시스템 상태 표시 줄 의 높이 와 화면 너비 가 져 오기
wx.getSystemInfo 라 는 함 수 를 사용 하여 시스템 상태 표시 줄 의 높이 와 화면 폭 을 가 져 옵 니 다.

2.2 오른쪽 상단 캡슐 위치 정보 획득
wx.getMenuButton BoundingClient Rect()방법 으로 오른쪽 상단 캡슐 위치 정 보 를 얻 습 니 다.
문 제 는 캡슐 의 상하 와 왼쪽 거 리 를 사용자 정의 하 는 것 이다.

2.3 사용자 정의 상단 거리 계산 코드
app.js 코드 는 다음 과 같 습 니 다.

App({
 //       
 onLaunch: function() {
 //              
 let capsuleObj = wx.getMenuButtonBoundingClientRect();
 // console.log("==    ==");
 // console.log(capsuleObj);

 wx.getSystemInfo({
 success: (res) => {
 // console.log("==      ==");
 // console.log(res)
 var statusBarHeight = res.statusBarHeight; //       

 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
 },
 },

 /**
 *        
 */
 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:여기 두 가지 스타일 을 봉 인 했 습 니 다.mene Flag 은 메뉴 입 니 다.backHomeFlag 은'되 돌아 가기+첫 페이지'스타일 입 니 다.
json 설정

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

5.소결
이 구성 요소 의 호환성 은 안 드 로 이 드,IOS,앞머리 화면 을 호 환 할 수 있 습 니 다.새로운 bug 가 테스트 되면 gitHub 에서 issues 를 제기 하여 해결 할 수 있 습 니 다.
링크:
위 챗 애플 릿 사용자 정의 상단 구성 요소
위 챗 애플 릿-사용자 정의 상단 구성 요소 customeHeader 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 사용자 정의 상단 구성 요소 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!