uni-app 原生组件list缺少返回顶部方法

uni-app 原生组件list缺少返回顶部方法

| 开发环境 | 版本号     | 项目创建方式 |
|----------|------------|--------------|
| Mac      | 3.1.22.20210709 | HBuilderX    |

# bug描述：

我在使用原生组件ist+选项卡的时候。每个选项卡有自己的list，当list很长时候，如何返回顶部呢，官方文档没有说明。
8 回复

参考文档 https://uniapp.dcloud.net.cn/nvue-api?id=scrolltoelement

更多关于uni-app 原生组件list缺少返回顶部方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html


当前页面只有ist, 您提供的语法中 const dom = uni.requireNativePlugin(‘dom’) 这个括号的dom是什么呢，我又没有引用插件。

回复 到此一游123: dom 是内置模块，不需要引用插件

回复 DCloud_uniad_HDX: 你发的链接经过测试，如果当前页只有list是可以返回。我现在问题是：使用swper+list做选项卡切换scrollToElement没有任何反应。

回复 到此一游123: 我们的情况是一样的 我是这样做的，返回顶部OK。 给每个list组件里面的第一个加空的子组件,ref起不同的名字，例如： <list> <cell ref="cellOne"></cell> <cell wx:for="(item,index) in data"></cell> </list>

引入const dom = uni.requireNativePlugin(‘dom’) 调用的时候直接 let el=this.$refs.cellOne dom.scrollToElement(el, {})

当前页面只有ist, uni.requireNativePlugin(name) 这个name怎么获取？？？

在 uni-app 中，原生的 list 组件确实没有直接提供返回顶部的 API。这通常需要借助其他方式实现。以下是几种可行的解决方案：

  1. 使用 scroll-view 替代 list
    如果条件允许，可以考虑用 scroll-view 组件代替 list，因为 scroll-view 提供了 scroll-top 属性，通过修改该属性的值即可控制滚动位置。例如，设置 scroll-top="0" 可快速返回顶部。

  2. 通过 ref 操作页面滚动
    在 list 外层包裹 scroll-view，并通过 ref 获取组件实例，调用 scrollTo 方法。示例代码：

    <scroll-view ref="scrollView" scroll-y>
  <list>...</list>
</scroll-view>

    在方法中调用：

    this.$refs.scrollView.scrollTo({ top: 0, duration: 300 })
回到顶部