vue-seamless-scroll（一个简单的基于vue.js的无缝滚动）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue-seamless-scroll（一个简单的基于vue.js的无缝滚动）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一般在数据可视化项目中经常会看到无缝滚动的表格，即轮播表，我们可以使用 vue-seamless-scroll 来实现，使用起来也很方便

vue-seamless-scroll官网：vue-seamless-scroll

1. 安装

NPM

npm install vue-seamless-scroll --save

Yarn

yarn add vue-seamless-scroll

PNPM

pnpm add vue-seamless-scroll

2. 引入组件注册

import VueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: { VueSeamlessScroll }
}

3. 使用

在实际项目中可能不止一个地方使用轮播表，所以我这里还是将其封装为单独一个组件可以复用，该组件默认都是宽高100% * 100%，给定一个容器引入即可。样式也是可以随意调整的，传入数据和配置项即可。具体配置项（class-option）看https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/properties.html#data

组件封装

src/components/VueSeamlessScroll/index.vue

<template>
  <div class="vue-seamless-scroll">
    <VueSeamlessScroll :data="listData" class="warp" :class-option="classOption">
      <div class="row" v-for="item in listData" :key="item.id">
        <div>{{ item.title }}</div>
        <div>{{ item.date }}</div>
      </div>
    </VueSeamlessScroll>
  </div>
</template>
<script>
import VueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: { VueSeamlessScroll },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    classOption: {
      type: Object,
      default: () => {}
    }
  }
};
</script>
<style scoped>
.vue-seamless-scroll {
  width: 100%;
  height: 100%;
  padding: 12px 5px;
  box-sizing: border-box;
}
.warp {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
</style>

组件引入使用 文章来源地址https://www.toymoban.com/news/detail-601654.html

<template>
  <div class="index">
    <div class="scroll-table">
      <!-- 轮播组件 -->
      <VueSeamlessScroll :listData="listData" :classOption="{ step: 1, limitMoveNum: 5 }" />
    </div> 
  </div>
</template>
<script>
import VueSeamlessScroll from '@/components/VueSeamlessScroll'
export default {
  data() {
    return {
      listData: []
    }
  },
  components: { VueSeamlessScroll },
  mounted(){
    this.getData()
  },
  methods:{
    // 获取轮播数据
    getData() {
      setTimeout(() => {
        this.listData = [
          {
            id: 1,
            title: "无缝滚动第一行无缝滚动第一行",
            date: "2017-12-16",
          },
          {
            id: 2,
            title: "无缝滚动第二行无缝滚动第二行",
            date: "2017-12-16",
          },
          {
            id: 3,
            title: "无缝滚动第三行无缝滚动第三行",
            date: "2017-12-16",
          },
          {
            id: 4,
            title: "无缝滚动第四行无缝滚动第四行",
            date: "2017-12-16",
          },
          {
            id: 5,
            title: "无缝滚动第五行无缝滚动第五行",
            date: "2017-12-16",
          },
          {
            id: 6,
            title: "无缝滚动第六行无缝滚动第六行",
            date: "2017-12-16",
          },
          {
            id: 7,
            title: "无缝滚动第七行无缝滚动第七行",
            date: "2017-12-16",
          },
          {
            id: 8,
            title: "无缝滚动第八行无缝滚动第八行",
            date: "2017-12-16",
          },
          {
            id: 9,
            title: "无缝滚动第九行无缝滚动第九行",
            date: "2017-12-16",
          },
          {
            id: 10,
            title: "无缝滚动第十行无缝滚动第十行",
            date: "2017-12-16",
          },
        ];
      }, 200);
    },
  },
}
</script>
<style scoped>
.index {
  width: 100%;
  height: 100%;
  padding: 20px 0 0 20px;
  box-sizing: border-box;
}
.scroll-table {
  width: 350px;
  height: 300px;
  border: 1px dashed red;
}
</style>

到了这里，关于vue-seamless-scroll（一个简单的基于vue.js的无缝滚动）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！