韩国优秀设计网站,最新的购物网站 开,网页设计制作成品,个人站长网站需要注册公司吗预期结果#xff1a;某button fixed 到页面底部#xff0c;进入该页面时#xff0c;正常显示button 实际结果#xff1a;小米13pro#xff0c;首次进入页面#xff0c;button不显示。再次进入时#xff0c;则正常展示 左侧为小米手机第一次进入。
遇到bug的解决思路某button fixed 到页面底部进入该页面时正常显示button 实际结果小米13pro首次进入页面button不显示。再次进入时则正常展示 左侧为小米手机第一次进入。
遇到bug的解决思路 1.定位问题原因 2.寻求问题解决方案
一、定位问题原因
尝试使用flex布局和fixed布局bug一致去掉flex布局与fixed布局不使用任何position和flex布局元素可以正常展示初步定位到是由于布局问题引起但此处必须使用定位布局此路不通 pass在多个机型iPhone16iPhone XR, Vivo红米下并没有发现该问题只有小米手机有问题定位为兼容性bug将fixed的bottom属性由0 改为固定的60, 发现bug的时候底部button是向上移动的。
由此定位为小米机型首次进入页面时某高度参数获取错误
二、寻求问题解决方案
由于该页面的层级嵌套太深尝试将该页面的跳转路径的深度扁平化处理貌似可以解决该问题但代码改动量太大。遂止在进入该页面时redirectTo重定向一次到页面自己的路径这样可以解决button不展示的问题但是对用户体验不是很友好每次进入该页面都会闪一下。因为无法判断该用户的机型是否有该bug没有bug的手机无需做该操作。由于使用真机调试时发现底部button的实际高度其实没有被挤压只是定位的位置不对。所以换思路使用top进行定位。但发现定位位置仍有问题使用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}})
})
