小程序
小游戏
企业微信
微信支付
扫描小程序码分享
想要在小程序中实现：页面中的特定区域滚动到顶部时悬停(就是美团小程序首页的综合排序，销量那里的效果，下图所示)
我试着用scroll-view提供的bindscroll方法获取滚动的距离，根据滚动的距离改变元素的样式，在模拟器上还挺顺畅，在真机(安卓机 oppor9s)上
着实是卡顿，请问有什么好的解决办法么？
或者有什么好的方法可以实现这样的效果么~(￣▽￣)~*
10 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
scroll-view这个组件的性能很差，最好不要在页面级别的滚动上去使用scroll-view，直接用page自身的滚动就好了，我们的小程序在开发的过程中发现很多这个组件的性能问题，现在只在局部滚动，滚动的内容很少的情况下会用scroll-view
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
学到了，谢谢指教(●'◡'●)
一楼正解。我们小程序很多地方都做了这个效果。开发者工具卡。手机上IOS很流畅，安卓卡一点点点点。
吸取大佬们的经验ヾ(≧▽≦*)o
我没用scrollview 直接在page一级监听滚动，通过class控制咯
谢谢大佬的源码，一会就去试下ヾ(≧▽≦*)o
我弱弱的问一下，我也是这个代码逻辑，但是在安卓真机上会出现 延迟 fix的情况，体验很卡顿。。。是什么情况，虽然我记得去年使用场景的时候并不卡顿，现在就出现很卡顿的情况。有解嘛
自己写个滑动的 比组件好用
不用scroll-view。onPageScroll 监听页面滚动 ，拿到e.scrollTop滚动的距离，大于某个值的时候，让这块固定在顶部
可以看看这个iview-weapp 的sticky组件的实现
scroll-view的bindscroll事件，配合API的createSelectorQuery()，比较滚动高度大于要fixed的元素以上区域高度，修改样式。效果还可以，没那么卡顿
page 的滚动好像就不会一卡一卡的了
是的，但是我没想到什么好的办法实现页面上的特定区域滚动到顶部时悬停的效果/(ㄒoㄒ)/~~
美团的也会卡顿一下吧
我这个卡顿的比较严重，几乎是我划到位置了，等5秒左右会悬停，还时不时的那种，体验很差劲。我是在bindscroll里面加了判断，如果距离顶部的距离小于90，会用setData改变样式，蛮耗性能的。希望可以有更好的解决方案♪(^∇^*)
不要频繁的setdata，设个全局变量判断顶部的距离小于90设为true，然后大于90设为false，只有在为true的时候setdata
css：sticky（ios可用，android部分可用。美团应该也是用这个属性的）
没必要为了这个效果做这么多的计算，小程序会卡卡的，而且安卓也达不到想要的效果。
跟产品商量一下，看能不能用这个属性。
谢谢您的建议！(/≧▽≦)/ 我尝试了下，安卓上果然没效果，查看了兼容性，我真的是mmp，这么好的属性，为啥兼容性这么差劲，崩溃。。。。 不过美团那个我在安卓机上试的，仍会有悬停的那个效果＞︿＜
android部分可用，我试过某些手机第一次进入可以用。第二次进入就不行了，也不知道小程序是啥情况。应该是第一次进入的时候使用的是小程序的x5浏览器支持这个属性，第二次进入的时候用的是android自带的浏览器内核，就使用不了这个属性了。
emm....不是很懂，按理说都是微信小程序，应该都是在微信浏览器的环境里才对呀ฅʕ•̫͡•ʔฅ想扒美团的源码，哈哈哈
去美团面试，说很好奇你们那个xxx的效果是怎么实现的，应该就可以知道了。
小程序的浏览器有时候是基于腾讯自己的x5内核浏览器，有时候是基于crosswalk内核的，你可以写个web-view组件，在web-view里面打印出浏览器的UA信息看看就知道了。
嗯o(*￣▽￣*)o我看看，谢谢(*^▽^*)
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
scroll-view这个组件的性能很差，最好不要在页面级别的滚动上去使用scroll-view，直接用page自身的滚动就好了，我们的小程序在开发的过程中发现很多这个组件的性能问题，现在只在局部滚动，滚动的内容很少的情况下会用scroll-view
学到了，谢谢指教(●'◡'●)
一楼正解。我们小程序很多地方都做了这个效果。开发者工具卡。手机上IOS很流畅，安卓卡一点点点点。
吸取大佬们的经验ヾ(≧▽≦*)o
我没用scrollview 直接在page一级监听滚动，通过class控制咯
谢谢大佬的源码，一会就去试下ヾ(≧▽≦*)o
我弱弱的问一下，我也是这个代码逻辑，但是在安卓真机上会出现 延迟 fix的情况，体验很卡顿。。。是什么情况，虽然我记得去年使用场景的时候并不卡顿，现在就出现很卡顿的情况。有解嘛
自己写个滑动的 比组件好用
不用scroll-view。onPageScroll 监听页面滚动 ，拿到e.scrollTop滚动的距离，大于某个值的时候，让这块固定在顶部
可以看看这个iview-weapp 的sticky组件的实现
scroll-view的bindscroll事件，配合API的createSelectorQuery()，比较滚动高度大于要fixed的元素以上区域高度，修改样式。效果还可以，没那么卡顿
page 的滚动好像就不会一卡一卡的了
是的，但是我没想到什么好的办法实现页面上的特定区域滚动到顶部时悬停的效果/(ㄒoㄒ)/~~
美团的也会卡顿一下吧
我这个卡顿的比较严重，几乎是我划到位置了，等5秒左右会悬停，还时不时的那种，体验很差劲。我是在bindscroll里面加了判断，如果距离顶部的距离小于90，会用setData改变样式，蛮耗性能的。希望可以有更好的解决方案♪(^∇^*)
不要频繁的setdata，设个全局变量判断顶部的距离小于90设为true，然后大于90设为false，只有在为true的时候setdata
css：sticky（ios可用，android部分可用。美团应该也是用这个属性的）
没必要为了这个效果做这么多的计算，小程序会卡卡的，而且安卓也达不到想要的效果。
跟产品商量一下，看能不能用这个属性。
谢谢您的建议！(/≧▽≦)/ 我尝试了下，安卓上果然没效果，查看了兼容性，我真的是mmp，这么好的属性，为啥兼容性这么差劲，崩溃。。。。 不过美团那个我在安卓机上试的，仍会有悬停的那个效果＞︿＜
android部分可用，我试过某些手机第一次进入可以用。第二次进入就不行了，也不知道小程序是啥情况。应该是第一次进入的时候使用的是小程序的x5浏览器支持这个属性，第二次进入的时候用的是android自带的浏览器内核，就使用不了这个属性了。
emm....不是很懂，按理说都是微信小程序，应该都是在微信浏览器的环境里才对呀ฅʕ•̫͡•ʔฅ想扒美团的源码，哈哈哈
去美团面试，说很好奇你们那个xxx的效果是怎么实现的，应该就可以知道了。
小程序的浏览器有时候是基于腾讯自己的x5内核浏览器，有时候是基于crosswalk内核的，你可以写个web-view组件，在web-view里面打印出浏览器的UA信息看看就知道了。
嗯o(*￣▽￣*)o我看看，谢谢(*^▽^*)