微信小程序中由scroll-view中使用fixed定位的元素引发的bug~

在微信小程序中，scroll-view中使用position:fixed定位的元素会失效，不再相对于根元素来定位，而是相对scroll-view定位。
经过查证，是由于scroll-view中的 refresherEnabled 导致的fixed失效。

解决

前提：页面有下拉刷新需求，并且其中的fixed定位Modal元素不好提取到父组件中控制展示和隐藏。
解决过程

• 首先尝试了使用view替换scroll-view
  给view标签设置overflow-y: auto;然后使用小程序自己的下拉刷新，在index.config.json中添加

"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",

页面中使用onPullDownRefresh方法即可。

But...又出现了新的问题。
因为页面中使用的自定义navbar，导致下拉刷新的控件被自定义的navbar遮挡。且微信官方不支持修改刷新控件的位置。
最终放弃此方案。

• 给fixed定位的Modal传参，当Modal展示时，禁用scroll-view的滚动（可行）
  依然使用scroll-view 代码如下

<ScrollView
  refresherEnabled
  refresherTriggered={refresherTriggered}
  onRefresherRefresh={onRefresherRefresh}
  scrollY={canScroll}
  scrollTop={scrollTop}
>

canScroll：是否可滚动
scrollTop：距离顶部

注意
将canScroll设置为false前，需要先将页面滚动到顶部，否则页面滚动一部分之后，展示Modal，依然以滚动前的位置定位。

const handleScroll = (visible) => {
  // 先写
  if (!visible) {
    // 当弹出层显示时，滚动到顶部,scrollTop没有变化的话不会滚动，所以使用了Math.random()
    setScrollTop(Math.random())
  }
  // 后写
  setCanScroll(e)
}