微信小程序自定义搜索标题栏

Posted 2022-11-23 五花肉三七分

一：需求

1. 把微信小程序标题栏处变成搜索栏。
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和中间按钮的上下边距margin

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