WeChat 애플릿 사용자 지정 검색 제목 표시줄

하나: 수요

1. WeChat 애플릿의 제목 표시줄을 검색 표시줄로 바꿉니다.
2. 상위 페이지로 돌아가도록 사용자 지정합니다.

2: 니즈 분석

1. 먼저 애플릿의 제목 표시줄을 사용자 정의할 수 있도록 설정합니다.
2. 그런 다음 원래 제목 표시줄의 높이를 계산하여 구조를 형성합니다.
3. 계산된 높이를 기준으로 검색 상자 및 뒤로 버튼의 레이아웃을 설정합니다.
4. 마지막으로 코드 기능을 구현합니다.

세: 기능 실현

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 및 중간 버튼의 위쪽 및 아래쪽 여백

1. 상태 표시줄 높이 얻기 wx.getSystemInfo.statusBarHeight
2. 가운데 버튼의 높이 가져오기 wx.getMenuButtonBoundingClientRect() (특정 WeChat 개발 문서에 해당하는 top, width, height, right의 4가지 값이 있음)
3. 가운데 버튼 여백의 상하 여백 가져오기 = 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>

다섯: 효과 표시