<think>我们正在使用
Vue 3来
实现一个左侧会话记录列表，需要具备两个主要功能：
1
. 触底请求下
一页（无限
滚动）
2. 删除功能
根据引用[1]，我们可以知道在微信小程序中下拉刷新和上拉
加载的事件处理，但这里我们是在
Vue 3中
实现，所以我们需要使用
Vue 3的方式来
实现无限
滚动（
触底加载下
一页）。另外，引用[
2]提到了在
Vue中修改数据后立即获取DOM需要使用$nextTick，但在这里我们主要关注数据驱动的视图更新。
另外，引用[4]提到了
vuex和localStorage的相关内容，我们可以考虑将会话记录存储在
vuex中，同时为了持久化，可能需要结合localStorage（但根据需求，暂时只需要
实现列表和删除，持久化不是重点）。
设计思路：
1
. 使用一个数组来存储会话记录（chatSessions），每个会话记录是一个对象。
2. 使用一个变量（currentPage）来记录当前页码，每次
触底加载下
一页时，页码加1，并请求数据（这里我们假设有一个获取会话记录分页的API）。
3
. 使用一个变量（hasMore）来标记是否还有更多数据，如果没有，则不再请求。
4
. 监听列表容器的
滚动事件，当
滚动到底部时，
加载下
一页。
5
. 实现删除功能，删除某条会话记录。
由于是在
Vue 3中，我们将使用Composition API。
步骤：
1
. 创建组件，并设置一个容器用于显示会话列表。
2. 在容器上监听
滚动事件，判断是否
触底。
3
. 实现加载数据的方法（包括初始
加载和
加载更多）。
4
. 实现删除方法，从列表中移除对应的会话记录。
注意：在删除时，由于是左侧列表，删除后可能需要更新列表，并重新计算
滚动位置等，但通常
Vue的响应式系统会自动更新视图。
具体代码
实现如下：
首先，我们创建一个组件（ChatSessionList
.vue）：
</think>基于您的需求，我将提供使用
Vue 3
实现左侧会话记录列表（支持
触底加载下
一页和删除功能）的完整方案：
### 核心
实现方案
```
vue
<template>
<div class="session-container">
<div
class="session-list"
@scroll="handleScroll"
ref="scrollContainer"
>
<div
v-for="session in sessions"
:key="session
.id"
class="session-item"
>
<div class="session-content">{{ session
.content }}</div>
<button @click="deleteSession(session
.id)">删除</button>
</div>
<div v-if="loading" class="loading">
加载中
...</div>
<div v-if="!hasMore" class="no-more">没有更多数据</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from '
vue'
// 响应式数据
const sessions = ref([]) // 会话列表
const currentPage = ref(1) // 当前页码
const loading = ref(false) //
加载状态
const hasMore = ref(true) // 是否有更多数据
const scrollContainer = ref(null) //
滚动容器引用
// 初始化
加载数据
onMounted(() => {
loadSessions()
})
// 模拟API请求
const fetchSessions = async (page) => {
return new Promise(resolve => {
setTimeout(() => {
// 模拟返回10条数据（实际应替换为真实API）
const data = Array
.from({ length: 10 }, (_, i) => ({
id: `${page}-${i}`,
content: `会话记录 ${page}-${i}`
}))
resolve(data)
}, 800)
})
}
//
加载会话记录
const loadSessions = async () => {
if (loading
.value || !hasMore
.value) return
loading
.value = true
try {
const newSessions = await fetchSessions(currentPage
.value)
if (newSessions
.length === 0) {
hasMore
.value = false
} else {
sessions
.value = [
...sessions
.value,
...newSessions]
currentPage
.value++
}
} catch (error) {
console
.error('
加载失败:', error)
} finally {
loading
.value = false
}
}
//
触底检测
const handleScroll = () => {
const container = scrollContainer
.value
if (!container) return
//
触底判断公式
const isBottom = container
.scrollHeight - container
.scrollTop <= container
.clientHeight + 50
if (isBottom && !loading
.value) {
loadSessions()
}
}
// 删除会话
const deleteSession = (id) => {
sessions
.value = sessions
.value
.filter(session => session
.id !== id)
// 重要：更新DOM后操作需使用nextTick（参考引用[
2]）
nextTick(() => {
console
.log('DOM已更新')
// 此处可添加删除后的额外逻辑
})
}
</script>
<style scoped>
.session-container {
width: 300px;
height: 100vh;
border-right: 1px solid #eee;
}
.session-list {
height: 100%;
overflow-y: auto;
padding: 10px;
}
.session-item {
padding: 1
2px;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.loading,
.no-more {
text-align: center;
padding: 10px;
color: #888;
}
</style>
```
### 关键
实现说明
1
. **
触底加载机制**:
- 使用 `@scroll` 监听
滚动事件
- 通过 `scrollHeight - scrollTop <= clientHeight + threshold` 公式检测
触底
- 避免重复请求的锁机制 `loading`
2. **数据
加载逻辑**:
- 分页
加载模式 (`currentPage`)
- 数据合并: `sessions
.value = [
...sessions
.value,
...newSessions]`
- 终止条件检测 (`hasMore`)
3
. **删除功能**:
- 使用 `filter` 创建新数组
实现响应式删除
- 删除后自动更新视图（
Vue 响应式特性）
- 需要 DOM 更新后操作时使用 `nextTick`（参考引用[
2]）
4
. **性能优化**:
-
滚动事件使用防抖（未在代码展示，建议添加）
- 避免不必要的 DOM 操作
- 虚拟
滚动建议（超长列表时）
### 相关技术点参考
1
. **
滚动容器处理**：小程序中使用 `page
.json` 启用下拉刷新（引用[1]），但
Vue 中需自行
实现滚动容器
2. **DOM 更新时机**：数据修改后获取 DOM 需用 `nextTick`（引用[
2]）
3
. **状态管理**：如需要跨组件共享会话状态，建议使用 Pinia（
Vuex 升级版）
4
. **持久化存储**：结合 `localStorage` 时注意字符串转换（引用[4]）
文章介绍了如何在Vue应用中使用滚动事件(handleScroll)检测滚动条滚动到页面底部，并基于此动态加载更多数据，如房间列表，实现分页效果。
扫一扫
2191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
