ios scrollView滚动底部空白区域的问题 enhanced和enableBackToTop冲突
微信小程序中使用 `ScrollView` 然后同时开启 `enhanced` 和 `enableBackToTop` ,并且当里面的内容高度大于 `scrollView` 后,并小于 `scrollView` 高度乘2时就会有这个问题。
·
问题描述:
微信小程序中使用 ScrollView 然后同时开启 enhanced 和 enableBackToTop ,并且当里面的内容高度大于 scrollView 后,并小于 scrollView 高度乘2时就会有这个问题。
即: scrollView 高度 < 内容高度 < scrollView 高度 * 2
解决方法:
enhanced和enableBackToTop只能选择其一。- 里面内容的高度让他大于两倍
scrollView的高度(我测的时候大概1.9倍左右也行,是不是机型影响我也不太清除)。
演示代码
import { View, ScrollView } from '@tarojs/components'
export default () => {
return (
<ScrollView
scrollY
style={{height: '100vh', background: '#000'}}
enableBackToTop
// 方法一: enhanced 和 refresherEnabled 只能选一个
enhanced
refresherEnabled
>
{/* 方法二:高度设置成大于 ScrollView 的两倍 height: '200vh' */}
{/* <View style={{height: '120vh', background: 'skyblue'}}></View> */}
<View style={{height: '200vh', background: 'skyblue'}}></View>
</ScrollView>
)
}
- 这个问题一直存在
可看微信开放社区:https://developers.weixin.qq.com/community/develop/issue/296
总结
这个问题测试了很久,我才定位到是这两个属性导致的,由于一开始是采用 swiper 包裹起来的 scrollView,然后 scrollView 的高度采用 flex 布局分配的,然后里面有个元素采用了 marginTop 导致了ios真机才发生的边距塌陷然后又修复了下。然后一轮轮的排查,最后才排查到这里的问题。

更多推荐



所有评论(0)