위 챗 애플 릿 사용자 정의 탐색 표시 줄 구성 요소
구성 요소 작성
오늘 네 비게 이 션 바 를 구성 요소 로 밀봉 해 야 하 는 이상 다음 과 같은 몇 가지 절차 가 필요 합 니 다.
구성 요소 구조 구축
먼저 다음 그림 과 같은 구 조 를 구축한다.
그리고 index 에 방금 만 든 구성 요 소 를 도입 합 니 다:
json 파일 에 인용 경 로 를 그림 1 과 같이 추가 하 십시오. 이 때 첫 페이지 의 효 과 는 다음 과 같 습 니 다.
구성 요소 기본 코드 작성
이 때 우 리 는 공식 문서 에 따라 맞 춤 형 설정 파일 에서 기본 설정 파일 을 수정 해 야 한 다 는 것 을 알 아야 합 니 다. 사실은 여 기 는 특정한 페이지 page 에 대해 설정 할 수 있 습 니 다. index 를 예 로 들 어 index. json 파일 에 다음 과 같은 코드 를 설정 하면 다음 과 같은 효 과 를 볼 수 있 습 니 다.
이 럴 때 우 리 는 자신 이 원 하 는 모습 을 쓰기 시작 할 수 있다. 먼저 간단 한 것 을 쓰 면 되 돌아 오 는 버튼 이 하나 밖 에 없다. 쓰기 시작 할 때 큰 문 제 를 발견 할 수 있다. 이 높이 는 얼마 입 니까?맨 위의 상태 표시 줄 높이 는 또 얼마 입 니까?이 두 가지 문제 에 어려움 을 겪 은 것 같 습 니 다. 이 럴 때 공식 api 문 서 를 보면 시스템 의 현재 더 많은 매개 변수 에 상태 표시 줄 높이 가 있 음 을 알 수 있 습 니 다. 그림 과 같 습 니 다.
사실 생각해 보면 우 리 는 상태 표시 줄 의 높이 만 알 고 있 는데 상태 표시 줄 의 높이 를 제외 하고 나머지 높이 는?또 하나의 문제 다.위 챗 애플 릿 의 공식 디자인 문서 에서 이 부분의 높이 가 똑 같이 높 은 것 을 알 수 있다. 그림 과 같다.
아무리 높 아 도 될 것 같 습 니 다. 아래로 뻗 을 수 있 기 때문에 여러 번 의 테스트 (정확 하지 않 을 수도 있 습 니 다) 를 통 해 애플 의 좋 은 안 드 로 이 드 에 차이 가 있 을 수 있 습 니 다. 그래서 자신 이 적당 한 부분 을 만 들 었 습 니 다.쓸데없는 말 이 많 으 신 가 봐 요. 코드 를 바로 달 아 주세요.
구조
'topbar'>
'status' style="height:{{statusHeight}}px">
'navbar' style="height:{{navHeight}}px">
'navbar_back' bindtap='backClick'>
'../images/black_back.png'>
'navbar_title' style="height:{{navHeight}}px">
여기 서 주요 한 사 고 는 fixed 로 포 지 셔 닝 을 하 는 것 입 니 다. 그 다음 에 내용 의 맨 끝 에 있 는 구조 가 있 기 때문에 모두 포 지 셔 닝 을 사용 하 는 것 이 편리 합 니 다. 전체적으로 두 부분 중 하 나 는 상태 표시 줄 이 고 하 나 는 제목 과 버튼 의 부분 입 니 다.
양식
.topbar {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.status {
width: 100%;
}
.navbar {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
}
.navbar_back {
padding: 0 32rpx;
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
}
.navbar_back image {
width: 21rpx;
height: 34rpx;
}
.navbar_title {
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.navbar_title view {
width: 40%;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 38rpx;
}
스타일 에 많은 것 이 없습니다. 유일 하 게 말 해 야 할 것 은 대부분의 모듈 이 포 지 셔 닝 으로 만 들 어 졌 다 는 것 입 니 다. 유일 하 게 고려 하지 않 은 것 은 제목 이 너무 길 어서 처리 하기 어렵 다 는 것 입 니 다. 여 기 는 간단 하고 거 친 방법 으로 폭 을 설정 하 는 것 입 니 다.
논리 적 처리
Component({
properties: {
/**
*
* customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"
*/
customBackReturn: {
type: Boolean,
value: false
}
},
data: {
},
methods: {
backClick() {
if (this.data.customBackReturn) {
this.triggerEvent("customBackReturn")
} else {
if (getCurrentPages().length == 1) {
wx.switchTab({
url: '/pages/index/index',
})
} else {
wx.navigateBack({
delta: 1
})
}
}
}
},
attached() {
var self = this;
wx.getSystemInfo({
success(res) {
var isIos = res.system.indexOf('iOS') > -1;
self.setData({
statusHeight: res.statusBarHeight,
navHeight: isIos ? 44 : 48
})
}
})
}
})
논리 에 서 는 주로 두 곳 에서 하 나 는 시스템 정 보 를 얻 을 때 네 비게 이 션 높이 에 대한 판단 이 고, 다른 하 나 는 이전 페이지 로 돌아 가 는 논리 입 니 다. 기본 값 은 홈 페이지 (주의 api) 를 여 는 것 입 니 다. 사용자 정의 이벤트 가 있 으 면 사용자 정의 이벤트 customeBackReturn 을 사용 합 니 다.
효과.
현재 효 과 는 사용자 정의 가 없 기 전과 차이 가 많 지 않 습 니 다. 일반적인 반환 단추 와 제목 텍스트 입 니 다. 다음 그림 입 니 다.
그러면 이렇게 간단 한 사용자 정의 네 비게 이 션 표시 줄 은 ok 입 니 다. 하지만 그렇다면 애플 릿 으로 가 져 오 는 것 이 더 좋 지 않 은 지 사용자 정의 하 겠 습 니 다. 그래서 우 리 는 계속 개선 하고 홈 페이지 로 돌아 가 는 단 추 를 추가 해 야 합 니 다.
되 돌리 기 단추 가 있 는 탐색
애플 릿 에서 특히 공 유 된 페이지 는 홈 페이지 로 돌아 가 는 버튼 이 하나 도 없 으 면 애플 릿 홈 페이지 로 어떻게 돌아 가 는 지 모 르 기 때문에 사용자 에 게 큰 불편 을 주 었 기 때문에 이런 수 요 는 반드시 있어 야 한다. 이 루어 진다 면?사실은 매우 간단 하 다. 왜냐하면 이미 하나 가 나 왔 기 때문에 필요 한 것 은 하 나 를 더 하면 된다.
구조
'topbar'>
'status' style="height:{{statusHeight}}px">
'navbar' style="height:{{navHeight}}px">
'navbar_home'>
'../images/black_back.png' bindtap='backClick'>
'../images/home_black.png' bindtap='homeClick'>
'navbar_title' style="height:{{navHeight}}px">
여러분 은 제 가 앞의 코드 에 직접 수정 하 는 것 이 아니 라 이전 코드 를 주석 한 것 을 알 고 있 습 니 다. 사실은 뒤에 원 하 는 네 비게 이 션 형식 을 사용자 정의 할 수 있 도록 남 겨 두 었 습 니 다.
양식
.navbar_home {
margin-left: 32rpx;
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 33rpx;
border: 1px solid rgba(0, 0, 0, 0.1);
background: rgba(0,0,0,0.2);
box-sizing: border-box;
padding: 10rpx 0;
}
.navbar_home image:first-child {
width: 21rpx;
height: 34rpx;
padding: 0 32rpx;
border-right: 1px solid rgba(255,255,255,0.2);
}
.navbar_home image:last-child {
width: 37rpx;
height: 35rpx;
padding: 0 32rpx;
}
같은 스타일 도 이전의 기초 위 에 이런 스타일 을 추 가 했 을 뿐이다.
논리학
homeClick() {
wx.switchTab({
url: '/pages/index/index',
})
}
논리 도 methods 에 홈 페이지 로 돌아 가 는 이 벤트 를 추가 할 뿐 입 니 다. 프로젝트 상황 에 따라 결정 해 야 합 니 다.
효과.
양식 은 모두 자신의 항목 에 따라 정할 수 있다.
이 두 부분의 기능 이 모두 완성 되 었 습 니 다. 그러나 지금 우리 가 홈 페이지 에 내용 을 추가 하면 문 제 를 발견 할 수 있 습 니 다. 다음 과 같 습 니 다.
우리 의 내용 도 위로 올 라 갔 는데, 이렇게 생각하면 내용 이 꼭대기 까지 올 라 가 는 것 이 바로 이런 효과 가 아 닙 니까? 그래서 이 문 제 를 해 결 했 습 니 다. 그런데 지금 문 제 는 이런 것 을 원 하지 않 는 것 입 니 다. 어떻게 하 시 겠 습 니까?생각 해 봐. 이거 잘 될 거 야. 내 가 이 부분 에 높 은 블록 을 하나 더 넣 으 면 되 잖 아. 그래서 지금 바로 이 걸 실현 할 거 야. 코드 는 다음 과 같 아.
"height:{{statusHeight+navHeight}}px" hidden='{{false}}'>
'topbar'>
'status' style="height:{{statusHeight}}px">
'navbar' style="height:{{navHeight}}px">
'navbar_home'>
'../images/black_back.png' bindtap='backClick'>
'../images/home_black.png' bindtap='homeClick'>
'navbar_title' style="height:{{navHeight}}px">
효 과 는 다음 과 같 습 니 다:
우리 가 false 를 true 로 바 꾸 면 내용 이 맨 위 에 있 는 효 과 를 얻 을 수 있 기 때문에 두 가지 효 과 를 실현 할 수 있 습 니 다. 여기 가 구성 요소 로 봉 인 된 이상 우 리 는 이렇게 쓸 수 없습니다. 봉 인 된 다음 에 다른 페이지 에 설정 한 다음 에 사용 해 야 하기 때문에 개조 가 필요 합 니 다.
네 비게 이 션 바 를 밀봉 하여 맞 춤 형 으로 만 들 수 있 습 니 다.
사용 을 더욱 편리 하 게 하기 위해 서 는 위의 네 비게 이 션 바 를 한층 더 밀봉 하여 서로 다른 수요 에 적응 해 야 한다.
구조 개조
먼저 개조 해 야 할 것 은 구조 입 니 다. 더 많은 옵션 을 배치 할 수 있 도록 구조 개 조 는 다음 과 같 습 니 다.
"height:{{statusHeight+navHeight}}px" hidden='{{header.hiddenBlock}}'>
'topbar' style="background:{{header.headerbg}}">
'status' style="height:{{statusHeight}}px">
'navbar' style="height:{{navHeight}}px">
if="{{header.slot}}">
else>
'navbar_home' wx:if="{{header.homeCapsule}}" style="background:{{header.capsulebg}};border:{{header.capsuleborder}}">
'../images/black_back.png' bindtap='backClick' style="border-right:{{header.capsulesep}}">
'../images/home_black.png' bindtap='homeClick'>
'navbar_back' bindtap='backClick' wx:else>
'../images/black_back.png'>
'navbar_title' style="height:{{navHeight}}px">
"color:{{header.fontColor}};font-size:{{header.fontSize}}">{{header.title}}
위의 모든 매개 변 수 는 설정 할 수 있 습 니 다. 이것 은 개발 자 에 게 다양한 스타일 을 만들어 주 었 습 니 다. 만약 에 부합 되 지 않 는 건의 가 있 으 면 위의 코드 를 직접 수정 하거나 스스로 포장 하 는 것 이 좋 습 니 다.
논리 개조
Component({
properties: {
header: {
type: Object,
value: {
homeCapsule: false,
headerbg: "#fff",
title: "",
fontColor: "#000",
fontSize: '16',
hiddenBlock: false,
capsulebg: 'rgba(0,0,0,0.2)',
capsuleborder: '1px solid rgba(0, 0, 0, 0.1)',
capsulesep: '1px solid rgba(255,255,255,0.2)',
slot: false
}
},
/**
*
* customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"
*/
customBackReturn: {
type: Boolean,
value: false
}
},
methods: {
backClick() {
if (this.data.customBackReturn) {
this.triggerEvent("customBackReturn")
} else {
if (getCurrentPages().length == 1) {
wx.switchTab({
url: '/pages/index/index',
})
} else {
wx.navigateBack({
delta: 1
})
}
}
},
homeClick() {
wx.switchTab({
url: '/pages/index/index',
})
}
},
attached() {
var self = this;
wx.getSystemInfo({
success(res) {
var isIos = res.system.indexOf('iOS') > -1;
self.setData({
statusHeight: res.statusBarHeight,
navHeight: isIos ? 44 : 48
})
}
})
}
})
구조의 개 조 는 사실 들 어 올 수 있 는 값 을 추가 하여 맞 춤 화 하 는 것 이다.
여기까지 기본적으로 이 구성 요 소 는 봉 인 됩 니 다. 다음은 이 구성 요 소 를 사용 하 는 것 입 니 다.
일반적인 반환 단 추 를 가 진 사례
이런 방식 의 응용 은 매우 간단 하 다. 직접 파 라 메 터 를 설정 하면 된다.
먼저 구성 요 소 를 다음 과 같이 도입 합 니 다.
{
"navigationStyle":"custom",
"usingComponents": {
"header":"../../components/navbar/navbar"
}
}
네 비게 이 션 표시 줄 사용자 정의 설정 이 필요 합 니 다. 그렇지 않 으 면 효과 가 없습니다. 자신의 경로 에 따라 도입 하면 됩 니 다. 모든 페이지 가 필요 하 다 면 app. json 에서 직접 설정 하 는 것 을 권장 합 니 다. 그러면 각 페이지 에서 설정 하지 않 아 도 됩 니 다.
wxml 에서 구성 요소 탭 사용 하기
'{{header}}'>
필요 한 페이지 에 header 탭 을 사용 하면 됩 니 다.
js 파일 설정 매개 변수
Page({
data: {
header:{
homeCapsule: false,
title: ' ',
fontColor: "#000",
fontSize: '36rpx',
headerbg: '#f40',
hiddenBlock: false,
slot: false
}
},
onLoad: function() {}
});
여기에 세 개의 매개 변 수 는 반드시 설정 해 야 합 니 다. homeCapsule, hidden Block, slot 세 개의 매개 변 수 는 각각 홈 단추 가 있 는 것 을 표시 할 지, 전체 상단 을 숨 길 지, 사용자 정의 구조 가 필요 한 지 여부 입 니 다.
효과.
그럼 이 가장 기본 적 인 것 은 이 루어 진 것 이다.
콘 텐 츠 맨 위의 인 스 턴 스
내용 을 위로 올 려 야 할 때 가 있 습 니 다. 보기 좋 을 때 가 있 기 때문에 hidden Block 을 설정 해 야 합 니 다. 코드 를 보 세 요.
'{{header}}'>
'../../images/timg.jpg' style="width:100%" mode="aspectFill">
중요 한 것 은 어떻게 설정 하 느 냐 입 니 다. 다음 과 같 습 니 다.
Page({
data: {
header:{
homeCapsule: false,
title: '',
headerbg: 'transparent',
hiddenBlock: true,
slot: false
}
},
onLoad: function() {}
});
효 과 는 다음 과 같 습 니 다:
홈 단추 가 있 는 내 비게 이 션
공유 페이지 는 첫 페이지 로 돌아 가 는 단 추 를 가 져 야 합 니 다. 어떻게 설정 합 니까?이 구성 요소 가 있 으 면 쉽게 설정 할 수 있 습 니 다. 설정 은 다음 과 같 습 니 다.
Page({
data: {
header:{
homeCapsule: true,
title: ' ',
headerbg: '#f40',
hiddenBlock: false,
slot: false
}
},
onLoad: function() {}
});
효 과 는 다음 과 같 습 니 다:
완전 사용자 정의
만약 이상 이 수 요 를 만족 시 키 지 못 한다 면 자신 만 썼 고 간단 한 실례 는 다음 과 같다.
'{{header}}'>
'../../images/timg.jpg' style="width:100%" mode="aspectFill">
설정 은 다음 과 같 습 니 다:
Page({
data: {
header:{
headerbg: 'transparent',
hiddenBlock: false,
slot: true
}
},
onLoad: function() {}
});
효 과 는 다음 과 같 습 니 다:
그럼요. 여 기 는 간단하게 밤 을 들 었 을 뿐 입 니 다. 구체 적 으로 는 여러분 이 직접 이 루 셨 습 니 다.이 구성 요소 의 대부분 패 키 징 이 완료 되 었 습 니 다.감사합니다!
다음으로 전송:https://juejin.im/post/5cf52b8251882556174dd795
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
