uni-app NVUE scrollToElement 滚动不起效

uni-app NVUE scrollToElement 滚动不起效

开发环境 版本号 项目创建方式
Windows 19041.450 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：19041.450

HBuilderX类型：正式

HBuilderX版本号：3.0.7

手机系统：Android

手机系统版本号：Android 8.0

手机厂商：华为

手机机型：Honor 8 Lite

页面类型：nvue

打包方式：离线

App下载地址或H5网址：https://www.jiaxiangx.com/

示例代码：

watch: {  
    // 页面下沉  
    userInfoMsg(msgs) {  
        console.log('页面下沉');  
        this.$nextTick(() => {  
            console.log(this.$refs[`refMsg${msgs[msgs.length - 1].id}`][0]);  
            let el = this.$refs[`refMsg${msgs[msgs.length - 1].id}`][0];  
            console.log(el);  
            dom.scrollToElement(el, {});  
        });  
        this.userList.forEach(item => {  
            if (item.roomid == this.roomid) {  
                item.size = 0;  
            }  
        });  
    }  
},

操作步骤：

watch: {  
    // 页面下沉  
    userInfoMsg(msgs) {  
        console.log('页面下沉');  
        this.$nextTick(() => {  
            console.log(this.$refs[`refMsg${msgs[msgs.length - 1].id}`][0]);  
            let el = this.$refs[`refMsg${msgs[msgs.length - 1].id}`][0];  
            console.log(el);  
            dom.scrollToElement(el, {});  
        });  
        this.userList.forEach(item => {  
            if (item.roomid == this.roomid) {  
                item.size = 0;  
            }  
        });  
    }  
},

预期结果：

收到新消息或者发消息 滚动到最新消息

实际结果：

不起效

bug描述：

仿微信聊天，发消息滚动到最新消息，使用 scrollToElement 失败 不起效， dom元素也可以获取到


更多关于uni-app NVUE scrollToElement 滚动不起效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

之前用的时候发现这个offset一定得写才会起效，并且有值dom.scrollToElement(el, { offset: 1 })

更多关于uni-app NVUE scrollToElement 滚动不起效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我试了 还是没有起效

回复 1***@qq.com: 我刚测试了我的，还是起效的，你可以试下加延时执行或者看看是否ref 的唯一性等

回复 突然好想你: 我刚都试了一遍，数组里的每一项都是push 进去的，ref也就一个 然后就是不起效，心态都要崩了

回复 1***@qq.com: 或者再看看是否滚动是通过list滚动的，如果是页面级的滚动里面嵌的list那也是无效的，我的测试了确实是生效的。如果实在不行，也可以考虑用scroll-view，或者等官方回复

回复 突然好想你: 大佬 如何辨别list滚动和页面级滚动

回复 1***@qq.com: https://uniapp.dcloud.io/component/list 禁用掉list滚动，如果页面还能滚动就是页面级滚动，如果不能滚动，则是list滚动

回复 突然好想你: 了解 感谢大佬

回复 突然好想你: 大佬 我给了list 固定高 禁用了滚动，只有第一次是滚动的 后面的都不起效了，输入的内容也不显示了

回复 1***@qq.com: 每次得更换ref，比如这次跳转的是ref10,下次不能再跳到ref10得换过以后才行

回复 突然好想你: 谢谢

在nvue中使用scrollToElement需要注意几个关键点：

  1. 确保dom模块已正确引入：
const dom = weex.requireModule('dom');
  1. scrollToElement必须作用在scroll-view组件上，确保你的列表是放在scroll-view内的：
<scroll-view ref="scrollView">
  <!-- 消息列表 -->
</scroll-view>
  1. 调用时需要指定scroll-view的ref：
this.$nextTick(() => {
  const scrollView = this.$refs.scrollView;
  const el = this.$refs[`refMsg${msgs[msgs.length - 1].id}`][0];
  dom.scrollToElement(el, {
    offset: 0
  }, scrollView.ref);
});
  1. 检查元素是否已渲染完成，可以尝试增加延迟：
setTimeout(() => {
  dom.scrollToElement(el, {
    offset: 0
  }, scrollView.ref);
}, 100);
  1. 确保scroll-view有固定高度且样式正确：
scroll-view {
  height: 100vh;
}
回到顶部