想要实现特定区域滚动到顶部时固定,请问有什么比较好的实现方式??

发布于 7 年前作者 uyu17281 次浏览最后编辑 7 年前来自 ask

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

WXOPEN Club 内容图片 WXOPEN Club 内容图片

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

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


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

10 回复
nawang
nawang1 楼6 年前

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


jqian
jqian2 楼6 年前

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

jjiang
jjiang3 楼6 年前

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

kyu
kyu4 楼6 年前

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

weihuang
weihuang5 楼6 年前
WXOPEN Club 内容图片

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

zenggang
zenggang6 楼6 年前

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

pcai
pcai7 楼6 年前

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

bgong
bgong8 楼6 年前

美团的也会卡顿一下吧

pingchang
pingchang9 楼6 年前

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

mren
mren10 楼5 年前

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

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

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