vue实现列表无限滚动，插件（vue-seamless-scroll）

vue实现列表无限滚动，插件（vue-seamless-scroll）

今天做大屏客户给个需求说要实现列表无限滚动，后来就想到了vue-seamless-scroll这个插件，可以看一下效果

111

先安装插件，

npm install vue-seamless-scroll --save

再main.js种引入并使用

import scroll form 'vue-seamless-scroll'
Vue.use(scroll)

最后在项目中使用如下：

<template>
    <vue-seamless-scroll :data="dataList">
        <div v-for="(item,index) in dataList" :key="index">
            <p>{{item.No}}:{{item.name}}</p>
            <el-progress :percentage="item.percentage" :show-text='false' color="'#1370bf'" ></el-progress>
        </div>
    </vue-seamless-scroll>

</template>
<script>
    data(){
        return{
            dataList:[
                {
                    No:'NO.1',
                    name:'XXXX',
                    percentage:32
                },
                {
                    No:'NO.2',
                    name:'XXXX',
                    percentage:55
                },
                {
                    No:'NO.3',
                    name:'XXXX',
                    percentage:72
                },
                {
                    No:'NO.4',
                    name:'XXXX',
                    percentage:83
                },
                {
                    No:'NO.5',
                    name:'XXXX',
                    percentage:100
                }
            ]
        }
    },

</script>