微信小程序底部button，小米手机偶现布局错误的bug

时间：2024-11-19 13:01:49

预期结果：某button fixed 到页面底部，进入该页面时，正常显示button
实际结果：小米13pro，首次进入页面，button不显示。再次进入时，则正常展示

在这里插入图片描述
左侧为小米手机第一次进入。

遇到bug的解决思路：
1.定位问题原因
2.寻求问题解决方案

一、定位问题原因

  1. 尝试使用flex布局，和fixed布局bug一致
  2. 去掉flex布局与fixed布局，不使用任何position和flex布局，元素可以正常展示，初步定位到是由于布局问题引起，但此处必须使用定位布局，此路不通 pass
  3. 在多个机型（iPhone16，iPhone XR, Vivo，红米）下并没有发现该问题，只有小米手机有问题，定位为兼容性bug
  4. 将fixed的bottom属性，由0 改为固定的60, 发现bug的时候，底部button是向上移动的。

由此定位为：小米机型首次进入页面时，某高度参数获取错误

二、寻求问题解决方案

  1. 由于该页面的层级嵌套太深，尝试将该页面的跳转路径的深度扁平化处理，貌似可以解决该问题，但代码改动量太大。遂止
  2. 在进入该页面时，redirectTo（重定向）一次到页面自己的路径，这样可以解决button不展示的问题，但是对用户体验不是很友好（每次进入该页面都会闪一下）。因为无法判断该用户的机型是否有该bug，没有bug的手机无需做该操作。
  3. 由于使用真机调试时发现，底部button的实际高度，其实没有被挤压，只是定位的位置不对。所以换思路，使用top进行定位。但发现定位位置仍有问题
  4. 使用taro的选择权查询对象，获取该元素的高度。调试中发现，获取该元素的高度在bug时，比正常高度要低。buttonWrapperHeight
解决思路：手动算一下底部button的高度，如果实际获取的高度 < 手动算的最小高度时，则定位中使用手动算的最小高度

:style="{ top: `${getSystemInfoSync().windowHeight - buttonWrapperHeight}px` }"

// 底部按钮wrapper高度
const buttonWrapperHeight = ref(0)
onMounted(async () => {
  // 获取底部列表的接口
  await getList('111')
  // 创建一个选择器查询对象
  const query = Taro.createSelectorQuery()
  // 选择底部按钮的元素，并获取其高度
  query
    .select('#verifyButtonWrapper')
    .boundingClientRect()
    .exec((res) => {
      const rect = res[0]
      if (rect) {
        const calcActualHeight = 75 + List.value.length > 0 ? piplList.value.length * 20 : 0
        buttonWrapperHeight.value = rect.height > calcActualHeight ? rect.height : calcActualHeight
      }
    })
})

相关文章