하나: 수요
- WeChat 애플릿의 제목 표시줄을 검색 표시줄로 바꿉니다.
- 상위 페이지로 돌아가도록 사용자 지정합니다.
2: 니즈 분석
- 먼저 애플릿의 제목 표시줄을 사용자 정의할 수 있도록 설정합니다.
- 그런 다음 원래 제목 표시줄의 높이를 계산하여 구조를 형성합니다.
- 계산된 높이를 기준으로 검색 상자 및 뒤로 버튼의 레이아웃을 설정합니다.
- 마지막으로 코드 기능을 구현합니다.
세: 기능 실현
1: 제목 표시줄을 사용자 지정 가능하도록 설정
usingComponents는 사용된 관련 구성 요소입니다.
{
"usingComponents": {
"van-uploader": "@vant/weapp/uploader/index",
"van-button": "@vant/weapp/button/index",
"van-search": "@vant/weapp/search/index"
},
"navigationStyle": "custom"
}
2: 제목 표시줄 높이 계산
제목 표시줄 높이의 구성 요소: 상단 상태 표시줄 높이 statusBarHeight 및 중간 버튼의 높이 getMenuButtonBoundingClientRect 및 중간 버튼의 위쪽 및 아래쪽 여백
- 상태 표시줄 높이 얻기 wx.getSystemInfo.statusBarHeight
- 가운데 버튼의 높이 가져오기 wx.getMenuButtonBoundingClientRect() (특정 WeChat 개발 문서에 해당하는 top, width, height, right의 4가지 값이 있음)
- 가운데 버튼 여백의 상하 여백 가져오기 = top(가운데 버튼의 위쪽 테두리 좌표) - statusBarHeight
onLoad: function (options) {
this.setData({
menuButtonInfo: wx.getMenuButtonBoundingClientRect()
})
// console.log(this.data.menuButtonInfo)
const { top, width, height, right } = this.data.menuButtonInfo
wx.getSystemInfo({
success: (res) => {
const { statusBarHeight } = res
const margin = top - statusBarHeight
this.setData({
navHeight: (height + statusBarHeight + (margin * 2)),
searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
searchHeight: height, // 与胶囊按钮同高
searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
})
},
})
// 生命周期函数--监听页面加载
},
4: 코드 구현
1:js
Page({
data:{
navHeight: '',
menuButtonInfo: {},
searchMarginTop: 0, // 搜索框上边距
searchWidth: 0, // 搜索框宽度
searchHeight: 0, // 搜索框高度
},
goBack(){
wx.navigateBack({
delta: 1, // 回退前 delta(默认为1) 页面
})
},
onLoad: function (options) {
this.setData({
menuButtonInfo: wx.getMenuButtonBoundingClientRect()
})
// console.log(this.data.menuButtonInfo)
const { top, width, height, right } = this.data.menuButtonInfo
wx.getSystemInfo({
success: (res) => {
const { statusBarHeight } = res
const margin = top - statusBarHeight
this.setData({
navHeight: (height + statusBarHeight + (margin * 2)),
searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
searchHeight: height, // 与胶囊按钮同高
searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
})
},
})
// 生命周期函数--监听页面加载
},
})
2:wxss
/* 自定义导航栏 */
view {
box-sizing: border-box;
overflow: hidden;
}
.custom-bar {
/* background-color: #aaa; */
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #fafafa;
z-index: 9;
}
.custom-bar__wrapper {
padding: 0 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.search-group {
width: 88%;
height: 100%;
border: 1px solid #666;
background-color: #fafafa;
border-radius: 60rpx;
}
.van-search {
font-size: 25rpx;
margin: 0 -15rpx;
height: 100%;
}
.goback {
justify-content: flex-start;
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
}
.search-btn {
width: 100rpx;
font-size: 35rpx;
}
3:wxml
<!-- 自定义导航栏 -->
<view class="custom-bar" style="height:{
{navHeight}}px">
<view class="custom-bar__wrapper" style="margin-top:{
{searchMarginTop}}px; height: {
{searchHeight}}px;width: {
{searchWidth}}px" >
<image src="../../../images/assetsImg/img5.png" class="goback" bindtap="goBack"></image>
<view class="search-group">
<van-search use-action-slot="true" background="#fafafa" shape="round" field-class="van-search" focus value="{
{ inputValue }}" placeholder="请输入关键字" bind:change="changeValue"> <view class="search-btn" slot="action" bind:tap="onClick">搜索</view></van-search>
</view>
</view>
</view>