uniapp中使用uview的u-list 或者内置组件scroll-view 实现tabs切换 list会到顶部实现

四叶草T2024-04-12 19:00

需求背景

页面中用到的 u-list 同 scroll-view 因为u-list底层也是对scroll-view进行的二次封装

想要实现顶部tabs切换的时候 list 回到顶部功能，官方提供了api并没给介绍怎么使用，在我们使用的时候不得不去翻看源码，在源码中可以清晰的看到底层的实现

首先通过onScroll获取滚动的高度进行记录

2、当你切换tabs的时候进行设置scrollTop高度并赋值给scrollTop 属性

scss 复制代码

    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中使用

ruby 复制代码

 <u-list        @scrolltolower="scrolltolower"        :scrollTop="scrollTop"        :height="pageHeight"        @scroll="scroll"      >
xxxxxxxxxxxxxx
</u-list>

以上图片是源码里面的内容，代码片段是功能代码