vue实现文字滚动效果

一、安装vue-infinite-scroll插件

vue-infinite-scroll是一个插件库，旨在为Vue提供无限滚动功能。可以使用CDN，在head标签中添加以下内容：

<script src="https://cdn.jsdelivr.net/npm/vue-infinite-scroll@2.0.2/dist/vue-infinite-scroll.min.js"></script>

也可以使用npm进行安装：

npm install vue-infinite-scroll --save

二、在Vue项目中引入vue-infinite-scroll

在需要使用这个插件的组件中，引入并使用插件即可：

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

引入后，在需要实现无限滚动效果的元素上使用v-infinite-scroll指令即可，例如：

<div v-infinite-scroll="loadMore" infinite-scroll-distance="10">
    // 内容
</div>

其中，loadMore是需要在滚动到底部时被调用的方法名，infinite-scroll-distance可选，默认值为0，指滚动距离底部的最小值。

三、实现无限滚动效果

在loadMore方法中，可以请求下一页数据并拼接在当前数据后面，从而实现无限滚动效果。以下是一个简单的示例：

new Vue({
    el: '#app',
    data: {
        dataList: [1, 2, 3], // 当前数据
        pageNo: 2, // 下一页页码
        hasMore: true // 是否还有更多数据
    },
    methods: {
        loadMore() {
            if (!this.hasMore) return // 没有更多数据，不再请求
            axios.get('/api/data?pageNo=' + this.pageNo).then(res => {
                if (res.data.length === 0) {
                    this.hasMore = false
                } else {
                    this.dataList = [...this.dataList, ...res.data]
                    this.pageNo++
                }
            })
        }
    }
})

在这个示例中，请求/api/data接口获取下一页数据，拼接在当前数据后面，当返回数据为空时，表示没有更多数据，将hasMore变量设置为false，下次滚动到底部时将不再请求。