VueScroller 使用

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaozhenzhen/p/10018115.html

文章标签：

#javascript #ViewUI

本文详细介绍如何使用Vue-scroller插件实现下拉刷新和无限滚动加载功能，通过具体示例代码展示了插件的安装、引入及配置过程，并结合API调用实现了数据的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载插件 npm install vue-scroller -D

引入插件:

import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

demo
<template>
    <div>
        <scroller :on-refresh="refresh" :on-infinite="infinite" no-data-text="加载完成" refresh-text="下拉刷新" ref="my_scroller">
            <div v-for="(item, index) in items" @click="onItemClick(index, item)" class="row" :class="{'grey-bg': index % 2 == 0}">
                <p>序号:{{index+1}}</p>
                <p>昵称:{{ item.nikename }}</p>
                <p> 时间:{{ item.createTime }}</p>
            </div>
        </scroller>
    </div>
</template>

<script>
    import { getaa } from '@/api/api';

    export default {
        data() {
            return {
                items: [],
                pageSize: 10,
                pageNo: 1,
                maxpage: 1,
                counts: 0
            }
        },
        mounted() { },

        methods: {
            getDate(offset, fn) {
                var _this = this;
                var params = {
                    page: this.pageNo,
                    limit: this.pageSize,
                    sidx: "",
                    order: ""
                };
                getaa(params).then(res => {
                    var data = res.data.page.list;
                    _this.counts = res.data.page.totalCount;
                    var n = res.data.page.totalCount;
                    var m = _this.pageSize;
                    if(n % m > 0) {
                        _this.maxpage = parseInt(n / m) + 1;
                    } else {
                        _this.maxpage = parseInt(n / m);
                    }
                    if(_this.pageNo > _this.maxpage) {
                        fn(true);
                        return;
                    } else {
                        if(fn) fn();
                        this.items = this.items.concat(data);
                    }
                })

            },
            infinite(done) {
                this.pageNo++; //每当向上滑动的时候就让页数加1 
                setTimeout(() => {
                    this.getDate(this.pageNo, done);
                }, 1500)

            },
            refresh(done) {
                //这是向下滑动的时候请求最新的数据
                this.pageNo = 1;
                setTimeout(() => {
                    this.items = [];
                    this.getDate(this.pageNo, done);
                }, 1500)

            },

            onItemClick(index, item) {
                console.log(index)
            }
        }
    }
</script>

<style>
    @import url("../../assets/css/style.css");
    .row {
        padding: 20px;
        border-bottom: 1px solid red;
    }
</style>