vue3关于滚动条的应用

一个无所事事的程序猿

已于 2023-12-03 15:15:38 修改

阅读量1.9k

点赞数 13

文章标签： vue http java web vue.js 前端

于 2023-12-03 15:13:16 首次发布

本文链接：https://blog.youkuaiyun.com/dh99999900/article/details/134765276

版权

本文介绍了如何在Vue3中监听滚动条事件，包括使用`@scroll`和`ref`设置滚动位置，并比较了`smooth`和`instant`选项。实例演示了如何在滚动至底部时自动加载更多数据，同时讨论了避免频繁调用后台接口的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3监听滚动条事件

在标签上加上 @scroll=‘执行的回调函数’ 即可

<div class="content" @scroll="listenScollToBottom">
</div>

vue3设置滚动条位置

在标签上加上 ref=“你用ref定义的变量名称”

<div class="content" ref="scrollContainer">
</div>

设置滚动条位置

文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo

不使用 options 属性

const container = scrollContainer.value;
container.scrollTo(0,container.scrollHeight - container.clientHeight)

使用 options 属性

const container = scrollContainer.value;
 container.scrollTo({
   top: container.scrollHeight - container.clientHeight,
   behavior: "smooth", // 或者 'auto'
});

不是用options 属性默认直接跳转到目标位置

options属性的区别

smooth 属性会产生动画效果，并且滚动条事件也会触发多次
instant 属性不会产生动画效果，直接跳转，滚动条事件只会触发一次
总结：通过监听滚动条来调用后台接口时，选择smooth 最好

实际应用场景

通常滚动条事件用来确定是否快到底部或顶部，然后调用后台接口
我们以一个实例来说
template部分：

<div class="content" ref="scrollContainer" @scroll="listenScollToBottom">
</div>

script部分：

//往上翻是否还有数据
let isHave = ref("false");
let curr_page = 1;
const listenScollToBottom = () => {
  console.log(scrollContainer.value.scrollTop)
  if (scrollContainer.value.scrollTop < 200 && isHave.value === "true") {
    isHave.value = "false"
    curr_page++;
    getContents();
  }
};
const getContents = () => {
  $.ajax({
    url: "https://app5609.acapp.acwing.com.cn/api/chat/get/chat-content/",
    type: "get",
    headers: {
      Authorization: "Bearer " + store.state.user.token,
    },
    data: {
      recordUserId: chooseRecord.value.recordUserId,
      page: curr_page,
    },
    success(resp) {
      if (resp.error_message === "successfully") {
        if (curr_page === 1) {
          messageContent.value.splice(
            0,
            messageContent.value.length,
            ...resp.message.records
          );
          delayScoll();
        } else {
          messageContent.value.unshift(...resp.message.records);
        }
        isHave.value = resp.isHave
      }
    },
    error() {},
  });
};

这个实例告诉我们滚动条快到顶部时调用后台接口