InfiniteLoading

无限加载组件。

示例

<nut-infiniteloading 
@on-refresh="onRefresh" 
@on-infinite="onInfinite" 
:noMore="noMore">
    <div v-for="item in resultList">
        {{item}}
    </div>
</nut-infiniteloading>

export default {
    data(){
        return{
            page: 1, //当前页
            pageSize: 10, // 一页显示多少条
            noMore: false, //暂无更多数据显示
            resultList:[]
        }
    },
    created(){
        this.getList();
    },
    methods:{
        //查询列表
        getList(suc){
            let self = this;
            //模拟异步
            setTimeout(function(){
                let queryList = [1,2,3,4,5,6,7,8,9,10];
                if(self.page == 1){
                    self.resultList = queryList;
                } else {
                    self.resultList =[...self.resultList, ...queryList];
                }
                // self.noMoreFlag = true;//根据查询回的数据判断是否还有更多数据
                if(suc){
                    suc();
                }
            },600);
        },
        //刷新调用
        onRefresh(done) {
            this.page = 1;
            this.getList(done);
        },
        //下一页调用
        onInfinite(done) {
            this.page++;
            this.getList(done);
        }
    }
}

Props

Events