技术聊斋

向左右滚动

Vue3.0 无缝滚动组件展示数据第1条1743945940577
Vue3.0 无缝滚动组件展示数据第2条1743945940577
Vue3.0 无缝滚动组件展示数据第3条1743945940577
Vue3.0 无缝滚动组件展示数据第4条1743945940577
Vue3.0 无缝滚动组件展示数据第5条1743945940577
Vue3.0 无缝滚动组件展示数据第6条1743945940577
Vue3.0 无缝滚动组件展示数据第7条1743945940577
Vue3.0 无缝滚动组件展示数据第8条1743945940577
Vue3.0 无缝滚动组件展示数据第9条1743945940577
Vue3.0 无缝滚动组件展示数据第1条1743945940577
Vue3.0 无缝滚动组件展示数据第2条1743945940577
Vue3.0 无缝滚动组件展示数据第3条1743945940577
Vue3.0 无缝滚动组件展示数据第4条1743945940577
Vue3.0 无缝滚动组件展示数据第5条1743945940577
Vue3.0 无缝滚动组件展示数据第6条1743945940577
Vue3.0 无缝滚动组件展示数据第7条1743945940577
Vue3.0 无缝滚动组件展示数据第8条1743945940577
Vue3.0 无缝滚动组件展示数据第9条1743945940577
Vue3.0 无缝滚动组件展示数据第1条1743945940577
Vue3.0 无缝滚动组件展示数据第2条1743945940577
Vue3.0 无缝滚动组件展示数据第3条1743945940577
Vue3.0 无缝滚动组件展示数据第4条1743945940577
Vue3.0 无缝滚动组件展示数据第5条1743945940577
Vue3.0 无缝滚动组件展示数据第6条1743945940577
Vue3.0 无缝滚动组件展示数据第7条1743945940577
Vue3.0 无缝滚动组件展示数据第8条1743945940577
Vue3.0 无缝滚动组件展示数据第9条1743945940577
Vue3.0 无缝滚动组件展示数据第1条1743945940577
Vue3.0 无缝滚动组件展示数据第2条1743945940577
Vue3.0 无缝滚动组件展示数据第3条1743945940577
Vue3.0 无缝滚动组件展示数据第4条1743945940577
Vue3.0 无缝滚动组件展示数据第5条1743945940577
Vue3.0 无缝滚动组件展示数据第6条1743945940577
Vue3.0 无缝滚动组件展示数据第7条1743945940577
Vue3.0 无缝滚动组件展示数据第8条1743945940577
Vue3.0 无缝滚动组件展示数据第9条1743945940577
<template>
  <div class="scroll">
    <vue3-seamless-scroll :list="list" direction="left">
      <div class="item" v-for="(item, index) in list" :key="index">
        <span>{{ item.title }}</span>
        <span>{{ item.date }}</span>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const list = ref(listData); //填入下面的数据
    return { list }
  },
});
</script>
HTML

listData：

const listData = [
  {
    title: "Vue3.0 无缝滚动组件展示数据第1条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第2条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第3条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第4条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第5条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第6条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第7条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第8条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第9条",
    date: Date.now(),
  },
];
TypeScript