基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能

更新時(shí)間：2021年09月22日 10:46:55 作者：該用戶已超神

這篇文章給大家介紹基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能，給大家介紹了該組件的用法，通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧

注意：需要給父容器一個(gè)height和:data='Array'和overfolw:hidden;左右滾動(dòng)需要給ul容器一個(gè)初始化 css width。
先來介紹該組件的用法：
1.安裝命令：

cnpm install vue-seamless-scroll --save

2.main.js文件中作為全局組件引入

import scroll from 'vue-seamless-scroll'

Vue.use(scroll)

在這里插入圖片描述

<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="defaultOption">
        <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>

css代碼：

<style lang="scss" scoped>
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
</style>

<script>
    export default {
        data () {
            return {
                listData: [{
                   'title': '無縫滾動(dòng)第一行無縫滾動(dòng)第一行',
                   'date': '2017-12-16'
                 }, {
                    'title': '無縫滾動(dòng)第二行無縫滾動(dòng)第二行',
                    'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動(dòng)第三行無縫滾動(dòng)第三行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動(dòng)第四行無縫滾動(dòng)第四行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動(dòng)第五行無縫滾動(dòng)第五行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動(dòng)第六行無縫滾動(dòng)第六行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動(dòng)第七行無縫滾動(dòng)第七行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動(dòng)第八行無縫滾動(dòng)第八行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動(dòng)第九行無縫滾動(dòng)第九行',
                     'date': '2017-12-16'
                 }]
                }
            }
       }
</script>

computed: {
    defaultOption() {
      return {
        step: 0.6, // 數(shù)值越大速度滾動(dòng)越快
        hoverStop: true, // 是否開啟鼠標(biāo)懸停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        waitTime: 1000 // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)
      }
    }
  }

效果如下：

在這里插入圖片描述