sticky失效
使用fixed解决
解决方法(忽略第二种,只是记录自己的愚蠢时刻):
- 在没有特殊样式的情况下可以直接使用sticky-section,超级好用
https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html - 在scroll-view的bindscroll方法里,当scrollTop超出一定值时,让想要吸顶的元素的position,从sticky变成fixed(不要用这个!!!!有问题😭后面加了内容才发现,滑动到变更position时页面会抖动一下子)
https://developers.weixin.qq.com/s/Q9by8dm17vWB
3. 在scroll-view中设置属性using-sticky为true
解决过程:
我想先观察它飘起来大概是从哪里开始。获取了下面元素的初始高度,观察下来大概是滚动距离超过下面元素初始高度后会飘。就是说,当scrollTop值大概超出需要sticky的元素再下面的元素高度时,这个sticky的元素大概就要飘了。
查到了一些解决方式是使用vant-sticky,但我不想用组件库😂一些个莫名其妙的小倔强哈哈哈我看了他们的代码发现他们用的是fixed定位。我试了试果然它就不跑了。
当然啦,在查看vant源码之前先进行了一通搜索。试过的一些方法有:
- 给scroll-view设置的高度得是具体高度,不能够是100%;
- 不用scroll-view组件,直接pageScroll(没有用这个是因为我实在去除不了原生scroll-bar的样式,我是废物😂不能让它消失。而且!没法给容器添加overflow-x: hidden; 添加了这个属性后下面就没法子用sticky。可是不用overflow-x的话页面就算width为100%也会横着滚);
- scroll-view里有一个sticky-section。但是因为我有其它的需求,使用了这个组件后怎么都满足不了,所以还是用回了判断trigger;
- 觉得自己像🤡嘎嘎嘎早没看见那属性....今天页面里有一些数据才发现这玩意儿它position变化时会瞎滑一下子....又去翻了文档。果然人啊~得认真看文档嗷
tada~~~~我们就可以在scroll-view中使用sticky啦💃