直播平台开发，小程序自定义搜索标题栏

一：需求

把微信小程序标题栏处变成搜索栏。

自定义返回上级页面。

二：需求分析

首先要把小程序标题栏设置为可自定义。

然后计算原标题栏的高度组成结构。

根据计算高度设置搜索框和返回按钮的布局。

最后进行代码功能实现。

三：功能实现

1：设置标题栏可自定义

usingComponents是使用的相关组件

<br>{<br>    "usingComponents": {<br>        "van-uploader": "@vant/weapp/uploader/index",<br>        "van-button": "@vant/weapp/button/index",<br>         "van-search": "@vant/weapp/search/index"<br>      },<br>    "navigationStyle": "custom"<br>}

2：计算标题栏高度

标题栏高度组成部分：最上边的状态栏高度statusBarHeight和中间按钮高度getMenuButtonBoundingClientRect和中间按钮的上下边距margin

获取状态栏高度wx.getSystemInfo.statusBarHeight

获取中间按钮高度wx.getMenuButtonBoundingClientRect()（这里一共四个值top, width, height, right具体对应可查微信开发文档）

获取中间按钮的上下边距margin = top(中间按钮上边界坐标) - statusBarHeight

<br> onLoad: function (options) {<br>        this.setData({<br>            menuButtonInfo: wx.getMenuButtonBoundingClientRect()<br>          })<br>        //   console.log(this.data.menuButtonInfo)<br>          const { top, width, height, right } = this.data.menuButtonInfo<br>          wx.getSystemInfo({<br>            success: (res) => {<br>              const { statusBarHeight } = res<br>              const margin = top - statusBarHeight<br>              this.setData({<br>                navHeight: (height + statusBarHeight + (margin * 2)),<br>                searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距<br>                searchHeight: height,  // 与胶囊按钮同高<br>                searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度<br>              })<br>            },<br>          })<br>        // 生命周期函数--监听页面加载<br>    },

四：代码实现

1:js

Page({<br>    data：{<br>        navHeight: '',<br>        menuButtonInfo: {},<br>        searchMarginTop: 0, // 搜索框上边距<br>        searchWidth: 0, // 搜索框宽度<br>        searchHeight: 0, // 搜索框高度<br>    },<br>    goBack(){<br>        wx.navigateBack({<br>            delta: 1, // 回退前 delta(默认为1) 页面<br>        })<br>    },<br>    onLoad: function (options) {<br>        this.setData({<br>            menuButtonInfo: wx.getMenuButtonBoundingClientRect()<br>          })<br>        //   console.log(this.data.menuButtonInfo)<br>          const { top, width, height, right } = this.data.menuButtonInfo<br>          wx.getSystemInfo({<br>            success: (res) => {<br>              const { statusBarHeight } = res<br>              const margin = top - statusBarHeight<br>              this.setData({<br>                navHeight: (height + statusBarHeight + (margin * 2)),<br>                searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距<br>                searchHeight: height,  // 与胶囊按钮同高<br>                searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度<br>              })<br>            },<br>          })<br>        // 生命周期函数--监听页面加载<br>    },<br>})

2:wxss

/* 自定义导航栏 */<br>view {<br>  box-sizing: border-box;<br>  overflow: hidden;<br>}<br>.custom-bar {<br>  /*  */<br>  position: fixed;<br>  left: 0;<br>  top: 0;<br>  width: 100%;<br>  background-color: #fafafa;<br>  z-index: 9;<br>}<br>.custom-bar__wrapper {<br>  padding: 0 10rpx;<br>  display: flex;<br>  justify-content: space-between;<br>  align-items: center;<br>}<br>.search-group {<br>  width: 88%;<br>  height: 100%;<br>  border: 1px solid #666;<br>  background-color: #fafafa;<br>  border-radius: 60rpx;<br>}<br>.van-search {<br>  font-size: 25rpx;<br>  margin: 0 -15rpx;<br>  height: 100%;<br>}<br>.goback {<br>  justify-content: flex-start;<br>  width: 40rpx;<br>  height: 40rpx;<br>  margin-left: 20rpx;<br>}<br>.search-btn {<br>  width: 100rpx;<br>  font-size: 35rpx;<br>}

3:wxml

<!-- 自定义导航栏 --><br><view class="custom-bar" style="height:{{navHeight}}px"><br>    <view class="custom-bar__wrapper" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;width: {{searchWidth}}px" ><br>        <image src="../../../images/assetsImg/img5.png" class="goback" bindtap="goBack"></image><br>      <view class="search-group"><br>        <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><br>    </view><br>    </view><br>  </view>