想要实现特定区域滚动到顶部时固定,请问有什么比较好的实现方式??
发布于 6 年前 作者 uyu 17100 次浏览 来自 问答

想要在小程序中实现:页面中的特定区域滚动到顶部时悬停(就是美团小程序首页的综合排序,销量那里的效果,下图所示)

我试着用scroll-view提供的bindscroll方法获取滚动的距离,根据滚动的距离改变元素的样式,在模拟器上还挺顺畅,在真机(安卓机  oppor9s)上

着实是卡顿,请问有什么好的解决办法么?


或者有什么好的方法可以实现这样的效果么~( ̄▽ ̄)~*

10 回复

不用scroll-view。onPageScroll 监听页面滚动 ,拿到e.scrollTop滚动的距离,大于某个值的时候,让这块固定在顶部


自己写个滑动的  比组件好用

scroll-view这个组件的性能很差,最好不要在页面级别的滚动上去使用scroll-view,直接用page自身的滚动就好了,我们的小程序在开发的过程中发现很多这个组件的性能问题,现在只在局部滚动,滚动的内容很少的情况下会用scroll-view

一楼正解。我们小程序很多地方都做了这个效果。开发者工具卡。手机上IOS很流畅,安卓卡一点点点点。

我没用scrollview 直接在page一级监听滚动,通过class控制咯

可以看看这个iview-weapp 的sticky组件的实现

scroll-view的bindscroll事件,配合API的createSelectorQuery(),比较滚动高度大于要fixed的元素以上区域高度,修改样式。效果还可以,没那么卡顿

美团的也会卡顿一下吧

page 的滚动好像就不会一卡一卡的了

css:sticky(ios可用,android部分可用。美团应该也是用这个属性的)

没必要为了这个效果做这么多的计算,小程序会卡卡的,而且安卓也达不到想要的效果。

跟产品商量一下,看能不能用这个属性。

回到顶部