最近使用微信小程序的scroll-view实现上拉获取历史消息,遇到了很多坑,自己也百度了很多,但是依旧没
有解决数据重新渲染后滚动条回到顶部的问题,我结合了scroll-view的bindrefresherrefresh和
bindscrolltoupper和scroll-into-view来解决,体验感稍微提升了许多。
首先需要明白的一点是为什么会出现闪烁的问题,是因为微信小程序每次进行数据渲染的时候都会重绘页面,导致滚动条回到顶部,在使用scroll-into-view回到指定位置,一上一下就会产生闪烁的效果。
1.wxml代码部分
<scroll-view scroll-y class="total-container"
bindscrolltoupper="handleScrollUpper"
bind:refresherrefresh="onRefresh"
refresher-enabled="{
{true}}"
refresher-default-style="none"
refresher-threshold="{
{ 20 }}"
scroll-anchoring="{
{true}}"
scroll-into-view="{
{ toView }}">
//加载图标
<view class="load