现状
scroll-view内fix失效问题。
fixed的元素对于scroll-view元素来说,是相对于scroll-view容器进行固定的,不是相对于浏览器窗口。
整个页面内容是用scroll-view包裹的情况下,像吸顶的功能,同样的元素,需要维护两部分,一部分在scroll-view外面,一部分在scroll-view内部,通过监听滚动判断元素的显示隐藏。在页面较为复杂的情况下,这部分功能只能放在主页面,很难抽离出独立的组件。
场景
微信小程序
- scroll-view内,如果不开启scroll-view下拉刷新,多数机型fix生效。
- scroll-view内,开启scroll-view下拉刷新,fix均不生效。
支付宝
scroll-view不支持自定义下拉刷新,只能使用小程序原生的下拉刷新,且多数机型上是支持fix定位。
h5
scroll-view支持自定义下拉刷新,且多数机型上是支持fix定位。
解决方案
需要支持自定义下拉刷新的情况
需使用scroll-view包裹,使用自定义下拉刷新
- 兼容性较好,相对不易维护:fix元素放在外部,类似吸顶的功能,需要维护两套,通过切换显示隐藏来实现相关功能。
- 有版本要求,容易维护:使用root-portal包裹fix元素
**微信:**基础库:2.25.2开始支持 , 使用率<0.01%;
**支付宝: **基础库:2.8.3开始支持;
注意:root-portal挂在根节点上,注意样式需全局样式;支付宝没有externalClass。
兼容性:可以提示?设置可使用最低版本?
不需要自定义刷新,使用原生默认刷新
- fix定位尽量都放在 scroll-view外。
**备注:**basePage默认情况下,整个中间模块内容都是包在scroll-view里的,可以多加一个传值,可以页面独立来控制,页面涉及fxi内容方便抽离。
7 -不使用SCROLL-VIEW默认的滚动,使用页面默认滚动 --> 12 24 25 28 29 30 77 -->- 特殊场景下,需放在scroll-view内。
a. 禁用下拉刷新
b. root-portal
c. 维护多个元素,控制显隐
总结
尽量使用原生刷新,官方文档也建议fix定位尽量都放在 scroll-view外,性能和兼容性都比较好。
如果要支持自定义刷新的情况,后续可以考虑将root-portal的逻辑处理放在basePage中处理。