vue中使用无缝滚动

Vue 实现无缝滚动 vue-seamless-scroll

(1) 安装

npm install vue-seamless-scroll --save

(2) 在 main.js 中使用

// **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' })

(3)使用

注意：需要给父容器一个 height 和:data=’Array’和 overfolw:hidden;左右滚动需要给 ul 容器一个初始化 css width。

参数 direction 0 down、 1 up 、 2 left 、 3 right

参数 autoPlay true or false

参数 navigation true or false

参数 ScrollEnd 方法 回调方法

参数 limitMoveNum 最低多少个数据开始滚动

<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>

向下滚动

<template>
  <vue-seamless-scroll
    :data="listData"
    :class-option="classOption"
    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'
          }
        ]
      }
    },
    computed: {
      classOption() {
        return {
          direction: 0
        }
      }
    }
  }
</script>

向左边滚动

<template>
  <vue-seamless-scroll
    :data="newsList"
    :class-option="optionLeft"
    class="seamless-warp2"
  >
    <ul class="item">
      <li v-for="item in newsList" v-text="item.title"></li>
    </ul>
  </vue-seamless-scroll>
</template>
<style lang="scss" scoped>
  .seamless-warp2 {
    overflow: hidden;
    height: 25px;
    width: 380px;
    ul.item {
      width: 580px;
      li {
        float: left;
        margin-right: 10px;
      }
    }
  }
</style>
<script>
  export default {
    data() {
      return {
        newsList: [
          {
            title: 'A simple, seamless scrolling for Vue.js'
          },
          {
            title: 'A curated list of awesome things related to Vue.js'
          }
        ]
      }
    },
    computed: {
      optionLeft() {
        return {
          direction: 2,
          limitMoveNum: 2
        }
      }
    }
  }
</script>