Vue3 列表自动滚动播放 vue3-seamless-scroll

父组件data

javascript 复制代码

<script setup>
  import { getCurrentInstance, onMounted } from "vue";
  onMounted(() => {
   let data = [
        {
      "id": 25,
      "content": "设备离线",
      "is_recovery": 1,
      "trigger_time": "2024.04.19 16:48",
      "recovery_name": "已恢复"
    },
    {
      "id": 24,
      "content": "设备离线",
      "is_recovery": 1,
      "trigger_time": "2024.04.19 16:48",
      "recovery_name": "已恢复"
    }
  ]

  const { proxy } = getCurrentInstance();
  proxy.$refs["dsRealWarn"].initData(data); 
});

</script>

子组件 vue3-seamless-scroll 常用说明如下：

limitScrollNum 多少条才开始滚动

hover-stop="true" 鼠标悬浮暂停滚动

step 滚动的速度

滚动的列表所在容器必须设置样式 overflow: hidden;

javascript 复制代码

npm install vue3-seamless-scroll --save

javascript 复制代码

<template>
  <div class="warningInfo">
    <HomeTitle title="报警信息"></HomeTitle>
    <div class="content" v-if="items?.length > 0">
      <vue3-seamless-scroll hover-stop="true" hover="true" step="0.2" limitScrollNum="4" :list="items" class="scroll"
        v-if="items?.length > 0">
        <div class="item" v-for="item in items" :key="item.id">
          <div>
            <div class="top">
              <span :class="[
                item.is_recovery === 0 ? 'warningBg' : 'normalBg',
                'WaterMonitor',
              ]">{{ item.recovery_name }}</span>
              <span class="time">{{ item.trigger_time }}</span>
            </div>
            <div :class="[
              item.is_recovery === 0 ? 'warningRemark' : 'normalRemark',
              'remark',
            ]">{{ item.content }}</div>
          </div>
        </div>
      </vue3-seamless-scroll>
    </div>
    <HomeNoData class="scroll" :isBlackText="true" v-else />
  </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import HomeTitle from "./DsHomeTitle.vue";
import HomeNoData from "@/components/homeNoData/index.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const items = ref([]);

const initData = (data) => {
  items.value = data;
};


defineExpose({ initData });
</script>
<style lang="scss" scoped>
.warningInfo {
  width: 100%;
  height: calc((100vh - 160px) / 3 - 10px);
  background: #f0f9ff;
  border: 1px solid #fff;
  border-radius: 6px;
  margin-top: 10px;

  .content {
    width: 100%;
    height: calc((100vh - 160px) / 3 - 10px - 60px);
    overflow-y: auto;

    .item {
      width: 100%;
      // padding-left: 24px;
      padding: 0 12px;
      margin-top: 16px;

      .top {
        width: 100%;
        height: 21px;
      }

      .WaterMonitor {
        border-radius: 4px;
        font-size: 12px;
        margin-right: 6px;
        color: #fff;
        padding: 1px 4px;
      }

      .warningBg {
        background: linear-gradient(180.00deg, #b23535 0%, #d33232 100%);
      }

      .normalBg {
        background: linear-gradient(180.00deg, #00af75 0%, #008d5e 100%);
      }

      .time {
        font-size: 13px;
        color: #295574;
      }

      .remark {
        width: 100%;
        height: 25px;
        line-height: 25px;
        margin-top: 10px;
        font-weight: 500;
        font-size: 15px;
        text-align: left;
        color: #003558;
        padding: 0 8px;
      }

      .warningRemark {
        background: linear-gradient(260.36deg, #f0f9ff 0%, #ebd0d0 100%);
      }

      .normalRemark {
        background: linear-gradient(260.36deg, #f0f9ff 0%, #c9ecffe6 100%)
      }
    }
  }
}

.scroll {
  width: 100%;
  height: calc((100vh - 160px) / 3 - 10px - 60px);
  box-sizing: border-box;
  overflow: hidden;
}
</style>

参考管网
https://www.npmjs.com/package/vue3-seamless-scroll