目的是在翻页搜索时回到顶部
<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时发现值未变,索性取消调用了。