Uniapp scroll-view设置scroll-top为0时的失效探究

292 阅读1分钟

目的是在翻页搜索时回到顶部

<scroll-view
    :scroll-y="true"
    :scroll-top="scrollTop"
    class="container"
    :show-scrollbar="true"
    @scroll="scroll"
  >
</scroll-view>

这里给scrollTop初始值为0,即const scrollTop=ref(0)
触发事件给scrollTop赋值为0,并不会回到顶部
这里先给出解决方案:

uniapp.dcloud.net.cn/tutorial/vu…
4. 组件属性设置不生效解决办法

官方做的效果是从此刻的滑动进度跳到0,如果不需要这种效果可以写的简单点,只要把scrollTop变一下再变为0即可
注意scroll-view要限高里面的内容可以自由飞翔,不然下面的代码是失效的

const pageChange = async () => {
  scrollTop.value=-1
  await getData();
  nextTick(() => {
    scrollTop.value = 0;
  });
};

问题来了,为什么要变值再赋值才有效?

官方说法:

当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。

这里我的理解是,uniapp做了所谓的优化:对于ref变量,尝试调用setter时发现值未变,索性取消调用了

总结:Uniapp有助于心态锻炼