在你的代码中，使用了 scroll-view 来实现一个可滚动的评论区域，并且通过监听 @scrolltolower 事件来触发 handleScrollToLower 函数，以实现“触底更新”或加载更多评论的功能。
关键部分分析：
-
scroll-view组件:scroll-view是一个支持滚动的容器组件，可以通过设置scroll-y来启用纵向滚动。@scrolltolower事件监听器：当滚动到底部时会触发该事件，通常用来加载更多数据或执行其他操作。
-
@scrolltolower="handleScrollToLower":@scrolltolower绑定了handleScrollToLower函数。这个事件会在用户滚动到scroll-view的底部时被触发。
-
handleScrollToLower方法:- 当用户滚动到底部时，
handleScrollToLower被调用。你在该函数内部调用了triggerFunction来执行一些操作，比如加载更多评论。 - 在实际应用中，
triggerFunction可以替换成发起请求来从服务器获取更多数据，或者更新commentsList。
- 当用户滚动到底部时，
-
commentsList数据更新:- 你通过
onMounted生命周期钩子来模拟从服务器加载数据。初始化时填充了一个评论列表，并通过一个for循环来模拟追加更多的评论（其实是模拟加载更多的效果）。 - 在实际的生产环境中，你可能会在
triggerFunction中触发一个 API 请求，来拉取更多的数据并更新commentsList。
- 你通过
具体触底更新的实现逻辑：
- 用户向下滚动时，
scroll-view会触发scrolltolower事件。这个事件绑定到handleScrollToLower方法。 - 在
handleScrollToLower方法内，你调用了triggerFunction，这通常会是一个加载更多数据的函数。在你的例子中，triggerFunction只是简单地打印了一个日志，但在实际项目中它应该用来发起网络请求、更新数据或者执行其他任务。 - 如果评论数据被动态更新（例如通过调用 API 加载新评论并添加到
commentsList中），那么界面会自动重新渲染，展示新的评论内容，从而实现了“触底更新”的效果。
为什么这可以触底更新：
scroll-view组件的@scrolltolower事件会在滚动到底部时触发，因此可以实现加载更多数据的功能。触发该事件后，通过更新数据（如commentsList）来展示新的内容，从而完成“触底更新”。
<template>
<scroll-view class="commentBox" scroll-y @scrolltolower="handleScrollToLower">
<view class="comment" v-for="comment in commentsList" :key="comment.id">
<u-row style="">
<u-col span="">
<view class="">
<up-avatar :src="comment.url" size=28></up-avatar>
</view>
</u-col>
<u-col span="3" style="margin-left: 10rpx;">
<view class="">
<view class="" style="margin-bottom: -11rpx;">
<span style="font-weight: bolder;font-size: 20rpx;">{{comment.name}}</span>
</view>
<view class="">
<span style="font-size: 10rpx;font-weight: 200;">{{comment.date}}</span>
</view>
</view>
</u-col>
</u-row>
<u-row style="">
<u-col span="1" class=""></u-col>
<u-col span="11" class="">
<view class="" style="padding-right: 30rpx;">
<span style="font-size: 25rpx;">{{comment.comment}}</span>
</view>
</u-col>
</u-row>
<up-divider text="" style="margin: 8rpx 0rpx;"></up-divider>
</view>
</scroll-view>
</template>
<script setup>
import {
ref,
onMounted
} from 'vue'
const commentsList = ref([{
id: '',
url: '',
name: '张三',
date: '2023-12-23 12:12',
comment: '不知道说防静电搜咖啡机都说了粉底哦时间覅哦对王师傅is哦房间地哦师傅什么'
}])
onMounted(() => {
for (let i = 0; i < 10; i++) {
commentsList.value.push({
id: '' + i,
url: '',
name: '张三',
date: '2023-12-23 12:12',
comment: '不知道说防静电搜咖啡机都说了粉底哦时间覅哦对王师傅is哦房间地哦师傅什么'
})
}
})
const handleScrollToLower = () => {
console.log("已滚动到底部，触发函数！");
triggerFunction();
};
const triggerFunction = () => {
console.log("触发自定义函数");
};
</script>
<style lang="scss" scoped>
.commentBox {
width: 100%;
height: 100vh;
overflow-y: auto;
}
.comment {
margin-left: 20rpx;
}
.context {
font-size: 25rpx;
padding: 20rpx;
}
</style>
