基于 Vue 无缝滚动组件Vue-Seamless-Scroll

今天给小伙伴们推荐一款超棒的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演示
http://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

# 仓库地址
https://github.com/chenxuan0000/vue-seamless-scroll

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