【实战】前端必会 —— 微信小程序右上角胶囊按钮（标题设置透明后的处理）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【实战】前端必会 —— 微信小程序右上角胶囊按钮（标题设置透明后的处理）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Object wx.getMenuButtonBoundingClientRect() | 微信开放文档

Object wx.getSystemInfoSync() | 微信开放文档

一、问题

【实战】前端必会 —— 微信小程序右上角胶囊按钮（标题设置透明后的处理）
微信小程序右上角的胶囊按钮在正常情况下（正常设置 navigationBarTitleText）没有影响

但是标题部分设置透明（“navigationStyle”: “custom”,）后，问题就出现了

我这边的需求是在最顶部增加一个搜索框，由于存在胶囊按钮，为了美观，搜索框只占剩余宽度，且高度齐平，但是对于不同机型尤其是有刘海屏的机型，差别会很大

二、解决

使用 wx.getMenuButtonBoundingClientRect() 获取距上高度和宽度，并动态绑定到 wxml 对应 style属性中：

<van-search
  class="search"
  value="{{ keyword }}"
  shape="round"
  background="#00000000"
  placeholder="搜索感兴趣的内容"
  bind:change="onChange"
  bind:search="onSearch"
  clearable
  style="{{searchBarStyle}}"
/>

Page({
  data: {
    searchBarStyle: `top: ${wx.getMenuButtonBoundingClientRect().top - 10}px; width: ${wx.getSystemInfoSync().screenWidth - wx.getMenuButtonBoundingClientRect().width}px;`,
    ...
  }
})