vue3 处理鼠标滚轮上滑获取旧数据，下滑获取最新数据

最新推荐文章于 2024-08-09 21:30:00 发布

猫七七s

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量83

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/jyl4855/article/details/141033662

版权

template部分

<template>
  <div class="messageList" @wheel="handleWheel">
    <SmallLoading class="justify-end" v-if="isLoading"></SmallLoading>
    <el-scrollbar :always="true" ref="scrollbarRef">
      <div ref="innerRef">
        <div class="messageItem" v-for="item in messageList" :key="item.id">
          <div class="date">{{ timestampToTime(item.createTime) }}</div>
          <div class="flex items-center">
            <!-- 消息内容类型 0: 文字 1: 图文 2: 图片 3: 邀请加入组织 4: 申请加入组织 5: 平台掉线 6: 算力不足 7: 转接失败 -->
            <div class="message-content" v-if="item.messageContentType === 0">
              {{ item.messageContent }}
            </div>
            <div
              class="message-content"
              v-if="item.messageContentType === 1"
              v-html="item.messageContent"
            ></div>
            <div class="message-content" v-if="item.messageContentType === 2">
              <img :src="item.messageContent" alt="" />
            </div>
            <div
              class="isReceive mt-3 ml-3 flex justify-center items-center"
              v-if="
                item.messageContentType === 0 ||
                item.messageContentType === 1 ||
                item.messageContentType === 2
              "
            >
              <img src="@/assets/icons/88.svg" alt="" />
            </div>
            <div
              v-if="
                item.messageContentType !== 0 &&
                item.messageContentType !== 1 &&
                item.messageContentType !== 2
              "
              class="message-box"
            >
              <div class="messageTitle" v-if="item.messageContentType === 3">
                {{ parseJsonContent(item.messageContent) }} 邀请您加入协作
              </div>
              <div class="messageTitle" v-if="item.messageContentType === 4">
                {{ parseJsonContent(item.messageContent) }} 申请加入协作
              </div>
              <div class="messageTitle" v-if="item.messageContentType === 5">
                {{ parseJsonContent(item.messageContent) }} 拼多多账号掉线
              </div>
              <div class="messageTitle" v-if="item.messageContentType === 6">
                您的算力不足 请购买算力
              </div>
              <div class="messageTitle" v-if="item.messageContentType === 7">
                子账号{{ parseJsonContent(item.messageContent) }}转接失败
              </div>
              <div
                class="buttons flex justify-center"
                v-if="item.messageContentType === 4 || item.messageContentType === 3"
              >
                <div
                  class="Cancel"
                  :class="item.dealFlag ? 'info' : ''"
                  @click="changeCancel(item)"
                >
                  拒绝
                </div>
                <div
                  class="Confirm"
                  :class="item.dealFlag ? 'info' : ''"
                  @click="changeIsAgree(item)"
                >
                  同意
                </div>
              </div>
              <div
                class="buttons flex justify-center"
                v-else-if="
                  item.messageContentType === 5 ||
                  item.messageContentType === 6 ||
                  item.messageContentType === 7
                "
              >
                <div
                  class="Cancel"
                  :class="item.ignoreFlag ? 'info' : ''"
                  @click="changeCancel(item)"
                >
                  忽略
                </div>
                <div
                  class="Confirm"
                  :class="item.ignoreFlag ? 'info' : ''"
                  @click="changeIsChecked(item)"
                >
                  查看
                </div>
              </div>
            </div>
            <div
              v-if="
                item.messageContentType !== 0 &&
                item.messageContentType !== 1 &&
                item.messageContentType !== 2
              "
              class="isReceive mt-14 ml-3 flex justify-center items-center"
            >
              <img src="@/assets/icons/88.svg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

script部分：

import { throttle } from 'lodash'

const scrollbarRef = ref(null)

// 获取消息列表Api timeVector ： 0、新数据   1、旧数据
const getMessageListApi = (messageId = '0', timeVector = 0) => {
  if (isRequesting.value) return // 避免重复请求
  isRequesting.value = true // 开始请求，设置标志变量为true
  getMessageList({ messageId, timeVector })
    .then(res => {
      if (res.code === BusinessCode.Success) {
        isLoading.value = false
        if (res.data) {
          res.data.forEach(item => {
            message.changeMessageList(item)
          })
          messageList.value = message.messageList
        } else {
          ElMessage.warning('暂无消息')
        }
      } else {
        // 否则，显示警告消息
        ElMessage.warning(res.msg)
      }
      isRequesting.value = false // 请求结束，重置标志变量为false
    })
    .catch(() => {
      isRequesting.value = false // 请求失败也需重置标志变量
    })
}
let time = null
// 处理鼠标滚轮事件
const handleWheel = throttle(event => {
  clearTimeout(time)
  const scrollTop = scrollbarRef.value.wrapRef.scrollTop
  const scrollHeight = scrollbarRef.value.wrapRef.scrollHeight
  const clientHeight = scrollbarRef.value.wrapRef.clientHeight
  if (event.deltaY > 0 && scrollTop + clientHeight >= scrollHeight - 10) {
    // 滚动到底部时，加载更多消息
    isLoading.value = true
    time = setTimeout(() => {
      getMessageListApi(message.messageList[message.messageList.length - 1].messageId, 0)
    }, 1000)
  } else if (event.deltaY < 0 && scrollTop < 1) {
    isLoading.value = true
    time = setTimeout(() => {
      getMessageListApi(message.messageList[0].messageId, 1)
    }, 1000)
  }
}, 300) // 节流间隔设置为300毫秒