uni-app scroll-view scroll-into-view跳到最后一行问题

uni-app scroll-view scroll-into-view跳到最后一行问题

开发环境 版本号 项目创建方式
Mac MAC 10.15.6 HBuilderX

示例代码：

<scroll-view :class="text_hide_css" scroll-y="true" scroll-with-animation="true" show-scrollbar="false"  
    :scroll-into-view="intoindex">  
    <!--循环开始2-->  
    <view class="plbox" v-for="(item2,index2) in chat_list" :key="index2"  
        :style="'width:'+chat_width_plbox+'rpx;'">
        <view class="stx" :id='"text"+index2'>  
            <richTextReply :son-list="item2.sonList" :father-object="father" class="huifubox"  
                :style="'max-width:'+chat_width_huifubox+'rpx;'"></richTextReply>  
        </view>  
    </view>  
    <!--循环结束-->  
</scroll-view>  


richTextReply是我们在插件市场找到一个能自定义内容的插件。

## 操作步骤：


<scroll-view :class="text_hide_css" scroll-y="true" scroll-with-animation="true" show-scrollbar="false"  
scroll-into-view="intoindex">
        <!--循环开始2-->
        <view class="plbox" v-for="(item2,index2) in chat_list" :key="index2"  
style="'width:'+chat_width_plbox+'rpx;'">
            <view class="stx" :id='"text"+index2'>
                <richTextReply :son-list="item2.sonList" :father-object="father" class="huifubox"  
style="'max-width:'+chat_width_huifubox+'rpx;'"></richTextReply>
            </view>
        </view>
        <!--循环结束-->
    </scroll-view>

更多关于uni-app scroll-view scroll-into-view跳到最后一行问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app scroll-view scroll-into-view跳到最后一行问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你的代码和描述，scroll-into-view跳转异常通常由以下几个原因导致：

  1. 时机问题：scroll-into-view需要在DOM渲染完成后执行。当chat_list数据更新时，需要等待richTextReply组件内部渲染完成。建议在nextTick中设置intoindex值：
this.chat_list.push(newItem)
this.$nextTick(() => {
    this.intoindex = 'text' + (this.chat_list.length - 1)
})

  1. ID命名冲突：确保每个元素的id唯一。你的:id='"text"+index2'是合理的，但要确认没有其他元素使用相同ID。

  2. scroll-view高度问题：scroll-view必须设置固定高度才能正常滚动。检查CSS中是否设置了height或通过flex布局确定高度。

  3. 异步内容问题：richTextReply插件可能包含异步加载内容。如果内容动态变化，可能需要额外处理：

// 监听插件渲染完成
setTimeout(() => {
    this.intoindex = 'text' + (this.chat_list.length - 1)
}, 100) // 适当延迟
  1. 数据更新后重置：每次更新intoindex后，下次需要先重置：
this.intoindex = ''
this.$nextTick(() => {
    this.intoindex = 'text' + (this.chat_list.length - 1)
})
回到顶部