Uniapp触底刷新

在你的代码中，使用了 scroll-view 来实现一个可滚动的评论区域，并且通过监听 @scrolltolower 事件来触发 handleScrollToLower 函数，以实现“触底更新”或加载更多评论的功能。

关键部分分析：

1. scroll-view 组件:

   • scroll-view 是一个支持滚动的容器组件，可以通过设置 scroll-y 来启用纵向滚动。
   • @scrolltolower 事件监听器：当滚动到底部时会触发该事件，通常用来加载更多数据或执行其他操作。

2. @scrolltolower="handleScrollToLower":

   • @scrolltolower 绑定了 handleScrollToLower 函数。这个事件会在用户滚动到 scroll-view 的底部时被触发。

3. handleScrollToLower 方法:

   • 当用户滚动到底部时，handleScrollToLower 被调用。你在该函数内部调用了 triggerFunction 来执行一些操作，比如加载更多评论。
   • 在实际应用中，triggerFunction 可以替换成发起请求来从服务器获取更多数据，或者更新 commentsList。

4. 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>

原文地址：https://blog.csdn.net/qq_45153375/article/details/144143508

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！