需求背景
页面中用到的 u-list 同 scroll-view 因为u-list底层也是对scroll-view进行的二次封装
想要实现顶部tabs切换的时候 list 回到顶部功能,官方提供了api并没给介绍怎么使用,在我们使用的时候不得不去翻看源码,在源码中可以清晰的看到底层的实现
首先通过onScroll获取滚动的高度进行记录
2、当你切换tabs的时候进行设置scrollTop高度并赋值给scrollTop 属性
if (!innerScrollTop.value) return; scrollTop.value = innerScrollTop.value; nextTick(() => (scrollTop.value = 0));
// 为了结局页面tabs切换比较快可以添加 延迟重置进行优化
// 建议将此步骤放在数据请求完成再进行操作setTimeout(() => { scrollTop.value = innerScrollTop.value; nextTick(() => (scrollTop.value = 0)); }, 300);
3、在template中 使用
<u-list @scrolltolower="scrolltolower" :scrollTop="scrollTop" :height="pageHeight" @scroll="scroll" >
xxxxxxxxxxxxxx
</u-list>
以上图片是源码里面的内容,代码片段是功能代码