uni-app上拉加载下拉刷新的一个简单例子。

<template>
    <view>
        <view v-for="item in list" :key="item.ppkid">
            {{item.headline}}
        </view>
        <text class="loadMore" v-if="loading">{{!loading && list.length<1?"没有了":"加载中"}}</text>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list:[],
                loading:false,
                refreshing:false,
                pageNo:1,
            }
        },
        onLoad() {
            this.getData();
        },
        onReachBottom() {
            /* 到底部加载 */
            this.getData();
        },
        onPullDownRefresh() {
            // 下拉刷新
            this.refreshing = true;
            this.getData();
        },
        methods: {
            async getData(){
                console.log("0000000000")
                let para={
                    page:this.refreshing ==true? 1 : this.pageNo
                };
                this.loading=true;
                const {
                    data
                } = await this.$http.getunusedpaperlist(para);
                if(data.code==1){
                    this.loading=false;
                    if (data.data.length ==0) {
                            uni.showToast({
                                title: '没有数据',
                                icon: 'none'
                            });
                            return false;
                        }
                        if (this.refreshing &&  this.list.length>0) {//上拉加载很多之后去刷新的页面
                            uni.showToast({
                                title: '已经最新',
                                icon: 'none'
                            });
                            this.refreshing = false;
                            uni.stopPullDownRefresh();
                            return;
                        }
                        if (this.refreshing) {//第一次加载
                            this.refreshing = false;
                            uni.stopPullDownRefresh();
                            this.list = data.data;
                            this.pageNo = 2;
                        } else {
                            this.list = this.list.concat(data.data);
                            this.pageNo += 1;
                        }
                }
            },
        }
    }
</script>

<style>

</style>

上一篇:分页 page


下一篇:【NOIP2002】【Luogu1037】产生数(高精乘低精,DFS暴力搜索)