小程序 scroll-view与fix定位问题

39 阅读2分钟

现状

scroll-view内fix失效问题。

fixed的元素对于scroll-view元素来说,是相对于scroll-view容器进行固定的,不是相对于浏览器窗口。

整个页面内容是用scroll-view包裹的情况下,像吸顶的功能,同样的元素,需要维护两部分,一部分在scroll-view外面,一部分在scroll-view内部,通过监听滚动判断元素的显示隐藏。在页面较为复杂的情况下,这部分功能只能放在主页面,很难抽离出独立的组件。

场景

微信小程序
  1. scroll-view内,如果不开启scroll-view下拉刷新,多数机型fix生效。
  2. scroll-view内,开启scroll-view下拉刷新,fix均不生效。
支付宝

scroll-view不支持自定义下拉刷新,只能使用小程序原生的下拉刷新,且多数机型上是支持fix定位。

h5

scroll-view支持自定义下拉刷新,且多数机型上是支持fix定位。

解决方案

需要支持自定义下拉刷新的情况

需使用scroll-view包裹,使用自定义下拉刷新

  1. 兼容性较好,相对不易维护:fix元素放在外部,类似吸顶的功能,需要维护两套,通过切换显示隐藏来实现相关功能。
  2. 有版本要求,容易维护:使用root-portal包裹fix元素

**微信:**基础库:2.25.2开始支持 , 使用率<0.01%;

**支付宝: **基础库:2.8.3开始支持;

注意:root-portal挂在根节点上,注意样式需全局样式;支付宝没有externalClass。

兼容性:可以提示?设置可使用最低版本?

不需要自定义刷新,使用原生默认刷新
  1. fix定位尽量都放在 scroll-view外。

**备注:**basePage默认情况下,整个中间模块内容都是包在scroll-view里的,可以多加一个传值,可以页面独立来控制,页面涉及fxi内容方便抽离。

7 -不使用SCROLL-VIEW默认的滚动,使用页面默认滚动 --> 12 24 25 28 29 30 77 -->

  1. 特殊场景下,需放在scroll-view内。

a. 禁用下拉刷新

b. root-portal

c. 维护多个元素,控制显隐

总结

尽量使用原生刷新,官方文档也建议fix定位尽量都放在 scroll-view外,性能和兼容性都比较好。

如果要支持自定义刷新的情况,后续可以考虑将root-portal的逻辑处理放在basePage中处理。