uni-app 【报Bug】uni-im聊天页面滚动到底部方法showlast()在进入存在list组件的nvue页面后导致scrollToElement方法不生效

示例代码：

showLast(duration = 300) {  
    // #ifndef APP-NVUE  
    this.scrollIntoView = 'uni-im-list-last-item'  
    this.$nextTick(() => {  
        this.scrollIntoView = ''  
    })  
    // #endif  

    // #ifdef APP-NVUE  
    if (this.msgList.length) {  
        setTimeout(() => {  
            this.$nextTick(() => {  
                // let target = this.$refs['uni-im-list'].$refs['uni-im-list-last-item'];  
                let target = this.$refs['uni-im-list-item'][this.msgList.length - 1];  
                // console.log('chat ----- showLast', target);  
                nativePluginDom.scrollToElement(target, {  
                    animated: duration != 0,  
                    offset: 0  
                });  
            })  
        }, 100)  
    } else {  
        console.log('chat ----- need not showLast!');  
    }  
    // #endif  
}

操作步骤：

进入含有list组件的nvue界面后，点击输入框，键盘出现页面先被弹起并定位到最后一条消息，再次点击输入框收起键盘不再回滚

预期结果：

收起键盘后页面正常回滚键盘收起

实际结果：

收起键盘后页面不再回滚

bug描述：

uni-im聊天页面的滚动到底部方法showlast()，在进入存在list组件的nvue页面后，会导致scrollToElement方法不生效。

进入含有list组件的nvue界面后，点击输入框键盘会把页面弹起并滚动到最后一条聊天记录的位置，再次点击输入框把键盘收起后页面却无法回滚仍然卡在上次滚动的位置(消息记录不满一页时会导致页面异常)

开发环境	版本号	项目创建方式
Windows	22000.1696	HBuilderX
iOS	iOS 15

gougou168 1楼•10 天前

在使用 uni-app 开发时，如果你在 nvue 页面中使用了 list 组件，并且遇到了 scrollToElement 方法不生效的问题，这可能是由于 nvue 页面的渲染机制与 vue 页面不同所导致的。以下是一些可能的原因和解决方案：

1. `nvue` 页面的渲染机制

nvue 页面使用的是原生渲染，而 vue 页面使用的是 WebView 渲染。因此，nvue 页面中的 list 组件与 vue 页面中的 scroll-view 组件在处理滚动时有所不同。

2. `scrollToElement` 方法不生效的可能原因

异步渲染问题：nvue 页面中的 list 组件在数据更新后可能不会立即渲染，导致 scrollToElement 方法在元素还未渲染时调用，从而不生效。
元素未正确绑定：确保你在 scrollToElement 方法中指定的 element 已经正确绑定并且存在于 DOM 中。
list 组件的特性：list 组件本身可能有自己的滚动机制，导致 scrollToElement 方法无法正常工作。

3. 解决方案

方案一：延迟调用 `scrollToElement`

在数据更新后，延迟一段时间再调用 scrollToElement 方法，确保元素已经渲染完成。

setTimeout(() => {
    this.$refs.scrollView.scrollToElement(this.$refs.targetElement, {
        animated: true
    });
}, 300); // 延迟 300ms

方案二：使用 `list` 组件的 `scrollToIndex` 方法

如果 list 组件支持 scrollToIndex 方法，可以尝试使用该方法来滚动到指定位置。

this.$refs.list.scrollToIndex({
    index: targetIndex,
    animated: true
});

方案三：手动计算并设置 `scrollTop`

如果以上方法都不适用，可以尝试手动计算目标元素的位置，并设置 scrollTop。

const targetElement = this.$refs.targetElement;
const scrollView = this.$refs.scrollView;
const offsetTop = targetElement.offsetTop;

scrollView.scrollTop = offsetTop;

4. 其他注意事项

调试：使用 console.log 或调试工具检查 scrollToElement 方法调用时的元素状态，确保元素已经存在并且位置正确。
组件兼容性：检查 uni-app 的文档，确保你使用的组件和方法在 nvue 页面中是兼容的。

5. 示例代码

以下是一个简单的示例代码，展示如何在 nvue 页面中使用 list 组件并实现滚动到底部：

<template>
    <view>
        <list ref="list">
            <cell v-for="(item, index) in items" :key="index" :ref="'item' + index">
                <text>{{ item }}</text>
            </cell>
        </list>
        <button @click="scrollToBottom">滚动到底部</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
        };
    },
    methods: {
        scrollToBottom() {
            const lastIndex = this.items.length - 1;
            this.$refs.list.scrollToIndex({
                index: lastIndex,
                animated: true
            });
        }
    }
};
</script>