uniapp的下拉刷新和上拉加载-蒲公英云

uniapp的下拉刷新和上拉加载

小鱼儿 2023-05-22 08:43 157阅读 0赞

首先来说uniapp本身有对应的上拉加载和下拉刷新对应的生命周期

现在对自己一直写着的上拉加载和下拉刷新做个总结，优化

<template>
    <view class="appointment" v-if="yuershiSubscribeList.length > 0">
        <view class="list" v-for="(item,index) in yuershiSubscribeList" :key="item.id">
            <view class="detail">
                <text class="name">{ { item.name}}</text>
                <text class="type">类型 : <text class="color">{ { item.mom_name}}</text></text>
                <text class="time">预约时间 : { { parseInt(item.time) | c_time('yyyy-MM-dd hh:mm:ss')}}</text>
                <text class="distance">地址 : { { item.address}} </text>
            </view>
            <image class="head" :src="item.image" mode=""></image>
        </view>
    </view>
</template>
<script>
    import teacherModelClass from '@/common/model/teacher.js';
    const teacherModel = new teacherModelClass();
    export default { 
        data() { 
            return { 
                loadingText: '加载中...',
                loadingType: 0,
                contentText: { 
                    contentdown:'上拉显示更多',
                    contentrefresh: '正在加载...',
                    contentnomore: '没有更多数据了'
                },
                page:1,
                row: 10,
                yuershiSubscribeList:[],
            }
        },
        onReachBottom(){ 
            var  _this = this
            this.getmoreinfo();
        },
        onPullDownRefresh() { 
            this.page = 1;
            this.loadingType = 0;
            this.get_data();
            uni.stopPullDownRefresh();
        },
        onLoad() { 
            this.get_data();
        },
        methods: { 
            get_data(){ 
                let _this = this
                teacherModel.yuershiSubscribe(_this.page,_this.row).then(res => { 
                    console.log(res);
                    if(res.code === 2){ return false}
                    _this.yuershiSubscribeList = res;
                    console.log(JSON.stringify(this.yuershiSubscribeList))
                });
            },
            // 加载更多
            getmoreinfo() { 
                let _this = this;
                if (_this.loadingType !== 0) { //loadingType!=0;直接返回
                    return false;
                }
                _this.loadingType = 1;
                _this.page ++;
                var params={ 
                    page:_this.page,
                    row: _this.row
                };
                uni.showNavigationBarLoading();//显示加载动画
                _this.post('v1/Yuershi/my_yuershi_subscribe',params,(data)=>{ 
                    console.log(data);
                    uni.hideNavigationBarLoading();//关闭加载动画
                    if(data.code == 2){ 
                        uni.showToast({ 
                            title:'没有更多啦...',
                            icon:'none',
                            duration:2000
                        })
                        return false;
                    }else{ 
                        if (data.data == null) { //没有数据
                            _this.loadingType = 2;
                            uni.hideNavigationBarLoading();//关闭加载动画
                            return;
                        }
                        var new_info = data.data;
                        _this.yuershiSubscribeList = _this.yuershiSubscribeList.concat(new_info);//将数据拼接在一起
                        _this.loadingType = 0;//将loadingType归0重置
                        uni.hideNavigationBarLoading();//关闭加载动画 
                    }
                });//更多会员商品
            },
        }
    }
</script>

下面是效果下拉刷新效果
在这里插入图片描述
下面是上拉加载效果：

这是防止重复刷新或者加载的代码(上锁)

if (_this.loadingType !== 0) { //loadingType!=0;直接返回
                    return false;
                }
_this.loadingType = 1;

这是定义相关加载文字的data

data() { 
            return { 
                loadingText: '加载中...', // 加载效果动画
                loadingType: 0, // 上锁
                contentText: { 
                    contentdown:'上拉显示更多',
                    contentrefresh: '正在加载...',
                    contentnomore: '没有更多数据了'
                },
                page:1,
                row: 10,
                yuershiSubscribeList:[],
            }
        },

这是对应的下拉刷新和上拉加载的生命周期(钩子)，在这里调用刷新加载事件

onReachBottom(){ 
// 这是上拉加载对应的生命周期 调用 getmoreinfo()方法，该方法是对上拉加载的一些优化
            var  _this = this
            this.getmoreinfo();
        },
onPullDownRefresh() { 
// 这是上拉刷新的生命周期(钩子)
            this.page = 1;
            this.loadingType = 0;
            this.get_data();
            uni.stopPullDownRefresh(); // 这是停止上拉刷新的事件
        },