[已解决]想要实现特定区域滚动到顶部时固定，请

时间：2019-05-07 来源：小程序工厂

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

我试着用scroll-view提供的bindscroll方法获取滚动的距离，根据滚动的距离改变元素的样式，在模拟器上还挺顺畅，在真机(安卓机 oppor9s)上
着实是卡顿，请问有什么好的解决办法么？

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

微信小程序开发者回答：

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

微信小程序开发者回答：

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

微信小程序开发者回答：

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

微信小程序开发者回答：

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

微信小程序开发者回答：

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

微信小程序开发者回答：

可以看看这个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信息看看就知道了。

本文网址：http://www.91bianli.com/kaifazhinan/78301.html