ios scrollView滚动底部空白区域的问题 enhanced和enableBackToTop冲突

本文链接：https://blog.csdn.net/weixin_52014110/article/details/127124583

问题描述：

微信小程序中使用 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真机才发生的边距塌陷然后又修复了下。然后一轮轮的排查，最后才排查到这里的问题。