uniapp实现聊天消息触，vue3和vue2实现聊天消息触底 scrollTop ,scrollHeight Pc端H5端都适用

**UniApp实现聊天消息滚动**

在 UniApp 中，我们可以使用 `uni- scroll-view` 组件来实现聊天消息的滚动效果。下面是具体步骤：

###1. 安装必要组件首先，我们需要安装 `uni-scroll-view` 组件：

bashnpm install uni-scroll-view

###2. 创建 Scroll-View 组件在你的页面中，创建一个 `scroll-view` 组件，并设置其属性：

html<template>
 <view class="chat-container">
 <!-- 聊天消息列表 -->
 <scroll-view :scroll-top="scrollTop" :scroll-y="true" @scrolltoupper="handleScrollToUpper" @scrolltolower="handleScrollToLower"
 scroll-into-view="msgListBottom"
 ref="scrollView"
 class="chat-message-list">
 <!-- 聊天消息项 -->
 <view v-for="(item, index) in chatMessageList" :key="index" class="chat-message-item">
 {{ item.message }}
 </view>
 </scroll-view>
 </view>
</template>

<script>
export default {
 data() {
 return {
 scrollTop:0,
 chatMessageList: [
 { message: 'Hello, world!' },
 { message: 'This is a test message.' },
 // ...
 ],
 };
 },
 methods: {
 handleScrollToUpper() {
 console.log('上拉到顶部');
 },
 handleScrollToLower() {
 console.log('下拉到底部');
 },
 },
};
</script>

<style>
.chat-container {
 height:100vh;
}

.chat-message-list {
 padding:20rpx;
}
</style>

###3. 监听滚动事件在 `scroll-view` 组件中，我们可以监听 `scrolltoupper` 和 `scrolltolower`事件来实现聊天消息的滚动效果：

javascripthandleScrollToUpper() {
 console.log('上拉到顶部');
 // 滚动到顶部 this.scrollTop =0;
},
handleScrollToLower() {
 console.log('下拉到底部');
 // 滚动到底部 const scrollHeight = this.$refs.scrollView.scrollHeight;
 const clientHeight = this.$refs.scrollView.clientHeight;
 if (scrollHeight - clientHeight <= this.scrollTop) {
 this.scrollTop = scrollHeight - clientHeight;
 }
},

###4. 实现聊天消息的滚动效果在 `handleScrollToLower` 方法中，我们可以通过设置 `scrollTop` 属性来实现聊天消息的滚动效果：

javascriptif (scrollHeight - clientHeight <= this.scrollTop) {
 this.scrollTop = scrollHeight - clientHeight;
}

这样，当用户下拉到底部时，会自动滚动到最后一个消息项。

**Vue3和Vue2实现聊天消息触底 scrollTop,scrollHeight**

在 Vue3 和 Vue2 中，我们可以使用 `v-scroll` 指令来实现聊天消息的滚动效果。下面是具体步骤：

###1. 安装必要库首先，我们需要安装 `vue-scroll` 库：

bashnpm install vue-scroll

###2. 创建 Scroll 组件在你的页面中，创建一个 `scroll` 组件，并设置其属性：

html<template>
 <div class="chat-container">
 <!-- 聊天消息列表 -->
 <ul v-scroll @scrolltoupper="handleScrollToUpper" @scrolltolower="handleScrollToLower" ref="scrollView" class="chat-message-list">
 <!-- 聊天消息项 -->
 <li v-for="(item, index) in chatMessageList" :key="index">{{ item.message }}</li>
 </ul>
 </div>
</template>

<script>
import { Scroll } from 'vue-scroll';

export default {
 data() {
 return {
 scrollTop:0,
 chatMessageList: [
 { message: 'Hello, world!' },
 { message: 'This is a test message.' },
 // ...
 ],
 };
 },
 methods: {
 handleScrollToUpper() {
 console.log('上拉到顶部');
 },
 handleScrollToLower() {
 console.log('下拉到底部');
 const scrollHeight = this.$refs.scrollView.scrollHeight;
 const clientHeight = this.$refs.scrollView.clientHeight;
 if (scrollHeight - clientHeight <= this.scrollTop) {
 this.scrollTop = scrollHeight - clientHeight;
 }
 },
 },
};
</script>

<style>
.chat-container {
 height:100vh;
}

.chat-message-list {
 padding:20rpx;
}
</style>

###3. 监听滚动事件在 `scroll` 组件中，我们可以监听 `scrolltoupper` 和 `scrolltolower`事件来实现聊天消息的滚动效果：

javascripthandleScrollToUpper() {
 console.log('上拉到顶部');
 // 滚动到顶部 this.scrollTop =0;
},
handleScrollToLower() {
 console.log('下拉到底部');
 // 滚动到底部 const scrollHeight = this.$refs.scrollView.scrollHeight;
 const clientHeight = this.$refs.scrollView.clientHeight;
 if (scrollHeight - clientHeight <= this.scrollTop) {
 this.scrollTop = scrollHeight - clientHeight;
 }
},

###4. 实现聊天消息的滚动效果在 `handleScrollToLower` 方法中，我们可以通过设置 `scrollTop` 属性来实现聊天消息的滚动效果：

javascriptif (scrollHeight - clientHeight <= this.scrollTop) {
 this.scrollTop = scrollHeight - clientHeight;
}

这样，当用户下拉到底部时，会自动滚动到最后一个消息项。

**Pc端H5端都适用**

上述代码示例和方法都是在 PC 端和 H5 端都适用的。无论是在 PC 端还是 H5 端，都可以使用 `uni-scroll-view` 组件或 `vue-scroll` 库来实现聊天消息的滚动效果。

**注意事项**

* 在使用 `uni-scroll-view` 组件时，需要设置 `scroll-y` 属性为 `true`，以启用垂直滚动。
* 在使用 `vue-scroll` 库时，需要安装 `vue-scroll` 库，并在页面中创建一个 `scroll` 组件。
* 需要注意的是，在 PC 端和 H5 端的浏览器中，滚动效果可能会有所不同。