在微信小程序中,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 元素 程序 scroll fixedscroll-view元素 程序scroll scroll-view程序scroll view bindrefresherrefresh scroll-view程序scroll scroll-view程序tabbar scroll scroll-view顶部 页面 程序 scroll-view bindscroll组件 程序 scroll-view功能 程序scroll scroll-view scroll scroll-into-view view scroll-view scroll-view uniapp scroll view