Vue 列表滚动

旧城等待， 2022-10-13 12:58 193阅读 0赞

[这是大佬的文档地址][Link 1]

npm install vue-seamless-scroll --save

import vueSeamlessScroll from 'vue-seamless-scroll'

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

[Link 1]: https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default