uni app 生态的下拉刷新 上拉加载 源代码

<template>
    <!-- <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view class="">
            123
        </view>
    </view> -->
    <view class="content">
        <ItemComp :item="item" v-for="(item,index) in list" :key="index" />
        <!-- 底部文案 -->
        <view class="">
            <text >{{status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore)}}</text>
        </view>
    </view>
</template>

<script>
    import ItemComp from '../../components/item.vue'
    
    export default {
        data() {
            return {
                title: 'Hello',
                url:`https://reqres.in/api/users`,
                list:[],
                page:1,
                per_page:10,
                status:'more', // 默认展示上拉显示更多
                contentText:{
                    contentdown: "上拉显示更多",
                    contentrefresh: "正在加载...",
                    contentnomore: "没有更多数据了"
                }
            }
        },
        components:{
            ItemComp
        },
        onShow() {
            this.page =1
            this.per_page = 10
            this.list = []
        },
        onLoad() {
            // 页码归为第1页
            this.page = 1
            // 初始化获取列表数据
            this.fetchData()
        },
        // 下拉刷新触发
        onPullDownRefresh(val){
            this.page = 1
            this.per_page = 10
            console.log('下拉刷新',val)
            this.fetchData().then(()=>{
                uni.stopPullDownRefresh();
            }).catch(err=>{
                uni.stopPullDownRefresh();
                // 弹窗提示
                uni.showToast({
                                    title: '请求出错了',
                                    icon: 'none'
                                })
            })
        },
        // 上拉加载触发
        onReachBottom(){
            // 改变状态为加载中
            this.status = 'loading'
            // 页码发生变化
            ++this.page
            // 加载更多
            this.fetchData('loadMore').then(resArray=>{
                // 此时判断当前有没有请求到数据
                if(resArray.length){
                    this.status = 'more'
                    
                }else{
                    this.status = 'noMore';
                    --this.page;
                }
            }).catch(err=>{
                console.log('网络请求失败')
            })
        },
        methods: {
             fetchData(way){
                return new Promise((resolve,reject)=>{
                    uni.request({
                        url:this.url,
                        data:{
                            page:this.page,
                            per_page:this.per_page
                        },
                        success: (res) => {
                            console.log(res)
                            // 当页的数据
                            const resDataArray = res.data.data
                            if(way==='loadMore'){
                                this.list = this.list.concat(resDataArray)
                            }else{
                                this.list = resDataArray
                            }
                            // 抛出当页的数据
                            resolve(resDataArray)
                        },
                        fail(err) {
                            console.log('接口调用失败',err)
                            // 抛出异常
                            reject()
                        }
                    })
                })
                
            }
        }
    }
</script>

<style>
    /* .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    } */

    .content{
        width: 100%;
    }
    
</style>