今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll。

vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件。满足丰富的配置需求，支持上下左右无缝滚动，单步滚动，以及水平方向的手动切换功能。

安装

$ npm i vue-seamless-scroll -S

引入插件

// 在main.js中全局引入import Vue from 'vue'import VueSeamlessScroll from 'vue-seamless-scroll'Vue.use(VueSeamlessScroll)// 单个.vue文件局部注册<script>import VueSeamlessScroll from 'vue-seamless-scroll'export default {  components: {    VueSeamlessScroll  }}</script>

使用

<template>  <vue-seamless-scroll :data="listData" class="seamless-warp">    <ul class="item">      <li v-for="item in listData">        <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>      </li>    </ul>  </vue-seamless-scroll></template><script>export default {  data () {    return {      listData: [{        'title': '无缝滚动第一行无缝滚动第一行',        'date': '2017-12-16'      }, {        'title': '无缝滚动第二行无缝滚动第二行',        'date': '2017-12-16'      }, {        'title': '无缝滚动第三行无缝滚动第三行',        'date': '2017-12-16'      }, {        'title': '无缝滚动第四行无缝滚动第四行',        'date': '2017-12-16'      }, {        'title': '无缝滚动第五行无缝滚动第五行',        'date': '2017-12-16'      }]    }  }}</script><style lang="scss" scoped>.seamless-warp {  height: 229px; overflow: hidden;}</style>

参数配置

提供丰富的文档的代码示例

# demo演示 仓库地址

ok，就分享到这里。如果大家用的上的话，可以去看下哈~ 欢迎留言交流。