uni-app nvue中使用swiper+list时scrollToElement无效

uni-app nvue中使用swiper+list时scrollToElement无效

开发环境 版本号 项目创建方式
Mac 0.15.6 HBuilderX 
# 测试过的手机：
所有手机都是一样

## 示例代码：
```javascript
topRef 为顶部某个view的ref,点击后执行goTop  

goTo:function(){  
    dom.scrollToElement(this.$refs.topRef, {    
        offset: 100    
    })  
},

操作步骤：

topRef 为顶部某个view的ref,点击后执行goTop  

goTo:function(){  
    dom.scrollToElement(this.$refs.topRef, {    
        offset: 100    
    })  
},

预期结果：

希望在nvue中swiper+list使用能返回顶部

实际结果：

dom.scrollToElement(this.$refs.topRef, {
offset: 100
})
无效，不会返回！

bug描述：

经过证实，如果nvue中只使用list时候scrollToElement是可以返回顶部的。我现在是在nvue中，swiper+list 配合，scrollToElement无效。


更多关于uni-app nvue中使用swiper+list时scrollToElement无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue中使用swiper+list时scrollToElement无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 中，swiper 组件内嵌 list 时，直接使用 dom.scrollToElement 滚动到指定元素可能失效，这是因为 swiper 的页面结构影响了滚动容器的查找。

原因分析
dom.scrollToElement 需要明确作用于正确的滚动容器。在 swiper 嵌套 list 的场景下，list 自身的滚动容器被 swiper 包裹，导致 dom 模块无法直接定位到 list 的滚动视图。

解决方案

  1. 通过 list 组件的 scrollToElement 方法
    为 list 设置 ref，直接调用 list 组件的原生滚动方法：

    // 模板中给list设置ref
<list ref="myList"></list>

// 调用list的scrollToElement方法
this.$refs.myList.scrollToElement(this.$refs.topRef, { offset: 100 })

  2. 使用 $page 的滚动方法
    在 nvue 中，页面根容器可通过 $page 访问，尝试用其滚动方法：

    this.$page.scrollToElement(this.$refs.topRef, { offset: 100 })
回到顶部