乐趣区

关于微信小程序:微信小程序一自定义导航栏和fixed失效及各机型兼容问题

jiezi

前言

置信小伙伴们应该或多或少都开发过微信小程序，微信小程序的写法尽管和 vue 有很多相似的中央，但又有很多 vue 属性，在小程序中没有相似的实现，比方计算属性，watch 监听等；
因为小程序是附着在微信 app 上，所以常常要解决一些安卓端和苹果端的兼容，比方有些苹果机屏幕下方有平安区域，一些安卓机上点输入框输出结束后点实现按钮键盘不能主动发出，导致输入框不能失去焦点的问题，等等 …
为了当前本人和小伙伴们不再节约踩坑的工夫，我打算写一些文章记录一下我在开发微信小程序中遇到的一些坑和一些小性能的实现过程。

目录：

  • 微信小程序（一）自定义导航栏和 fixed 生效及各机型兼容问题
  • 微信小程序（二）用 movable-view 实现左滑删除性能
  • 微信小程序（三）实现相似 Vue 中的 computed，watch 性能
  • 微信小程序（四）相对不可错过切换自定义菜单栏的骚操作
  • 微信小程序（五）不同机型中的输入框兼容问题（待更新）
  • …

cover-view 组件应用 fixed 款式生效问题

背景

因我的项目需要，要开发一个自定义 tabBar，在微信官网文档找到一个 demo，官网 demo 看到 tabBar 组件是用根底组件 cover-view 和 cover-image 构建的架子，用 position 的 fixed 固定定位在手机屏幕最下方，用真机调试是发现 tabBar 组件并不一定会固定在屏幕的最下方，而且如果页面滑动，用 fixed 固定的区域会上下挪动

官网 demo 示例代码

起因：

在微信社区找相干问题发现是 cover-view 的起因 ，而后这个问题直到现在如同还没修复

解决方案

改用 view 和 image 根底组件构建架子就能够了

自定义导航栏、状态栏在不同机型的适配

背景起因

因为不同机型的导航栏和胶囊距高低间距不同，导致自定义的导航栏的高度不能固定。需要是导航栏的文字要和胶囊对齐。

解绝计划

废话不多说了，间接上代码，前面有解释阐明：

  /* 获取胶囊的地位和手机状态栏的信息 */
  async getMenuInfo() {let { top, height} = wx.getMenuButtonBoundingClientRect();
    let statusBarHeight = "";
    wx.getSystemInfo({success(res) {statusBarHeight = res.statusBarHeight}
    })
    this.setData({
      topParams: {
        top,
        height,
        statusBarHeight
      },
    })
  },

通过 wx.getMenuButtonBoundingClientRect() 获取菜单按钮（右上角胶囊按钮）的布局地位信息。坐标信息以屏幕左上角为原点。

获取的参数解释：

  • top 是上边界坐标，也就是胶囊间隔屏幕顶部的间隔，单位：px
  • height 是胶囊高度，单位：px
  • 而后通过 wx.getSystemInfo() 获取状态栏的高度 statusBarHeight，单位 px;
  • 综上所述可知 胶囊间隔状态栏的间隔 = 胶囊间隔屏幕顶部的间隔 (top) – 状态栏的高度 (statusBarHeight)

    通过这些参数你就能够写出本人想要的各种自定义导航栏的款式了。

参考文档：
wx.getMenuButtonBoundingClientRect()
wx.getSystemInfo()

写在最初

我是 AndyHu，目前临时是一枚前端搬砖工程师。

文中如有谬误，欢送在评论区斧正，如果这篇文章帮到了你，欢送点赞和关注呀😊

未经许可禁止转载💌

speak less，do more.

退出移动版