WeChat アプレットのカスタム検索タイトル バー

1: 需要

1. WeChat アプレットのタイトル バーを検索バーに変えます。
2. 親ページに戻るようにカスタマイズします。

2: ニーズ分析

1. まず、アプレットのタイトル バーをカスタマイズ可能に設定します。
2. 次に、元のタイトル バーの高さを計算して、構造を形成します。
3. 計算された高さに基づいて、検索ボックスと戻るボタンのレイアウトを設定します。
4. 最後に、コード関数を実装します。

3: 機能実現

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. 中ボタンの上端と下端の余白を取得する margin = 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>

5:エフェクト表示