打开电脑在Github上面转了一圈,发现一个基于vue.js的无缝滑动效果的插件,推荐给大家 ,先上示例图:

妖猫传

浏览器支持

云想衣裳花想容

安装

NPM

npm install vue-seamless-scroll --save

CDN

https://cdn.jsdelivr.net/npm/vue-seamless-scroll@1.1.3/dist/vue-seamless-scroll.min.js

用法

ES6

// **main.js**
// 1.global install
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

//or you can set componentName default componentName is vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})

// 2.single .vue import
<script>
  import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }
</script>
// demo
<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>
<style lang="scss" scoped>
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
</style>
<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'
                 }, {
                     'title': '无缝滚动第六行无缝滚动第六行',
                     'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第七行无缝滚动第七行',
                     'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第八行无缝滚动第八行',
                     'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第九行无缝滚动第九行',
                     'date': '2017-12-16'
                 }]
                }
            }
       }
</script>

一般用法
例子:源码

<html>
<head>
  ...
</head>
<body>
  <div id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
  </div>
  <script src="vue.js"></script>
  <script src="vue-seamless-scroll"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html> 

配置

defaultOption () {
        return {
          step: 1, //the faster the rolling speed is faster
          limitMoveNum: 5, //start seamless scrolling minimum data  //this.dataList.length
          hoverStop: true, //mouse hover control is enabled
          direction: 1, // 0 down || 1 up || 2 left || 3 right
          openTouch: true, //open touch 
          singleHeight: 0, //one single stop height(default zero is seamless) => direction 0/1
          singleWidth: 0, //one single stop width(default zero is seamless) => direction 2/3
          waitTime: 1000, //one single data stop wait time
          switchOffset: 30, // the left and right buttons distance from the left and right sides (px)
          autoPlay: true, // whether or not to automatically play the switch needs to be set to false
          switchSingleStep: 134, //the size of a single step switch (px)
          switchDelay: 400, // the time of a single step switch (ms)
          switchDisabledClass: 'disabled'  // the className of the switch parent element that cannot be clicked.
        }
      }

Github地址:vue.js无缝滑动效果