最简单制作网页_免费h5制作app平台_网站seo分析报告_免费web服务器网站

预期结果：某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 : 0buttonWrapperHeight.value = rect.height > calcActualHeight ? rect.height : calcActualHeight}})
})