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

发布时间 2023-06-21 13:39:19作者: ZerlinM

在微信小程序中,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的滚动(可行)