uniapp上拉加载-蒲公英云

uniapp上拉加载

最近在写uniapp的项目，看好写到上拉加载这一块，拿出来详细说一下写法，和注意事项吧。
首先在data里面要有这些值

last_page: '', //总页数
                page: 2,//上拉加载的起始页
                loadingnum: 12, //加载条数
                send:false,//上拉加载的状态  避免数据没更新时重复请求
                productlist:[],//数据盒子
                nodata: false, //没有更多数据
                loadings: false, //加载框

然后和onShow或者onLoad同级的地方写onReachBottom()

//上拉加载
        onReachBottom() {
            //判断总页数是否大于1 
            if (this.last_page > 1) {
                if(this.send == false){        
                    if (this.page <= this.last_page) {
                        //开始加载
                        this.send = true;
                        this.loadings = true;//这个是上拉的特效
                        this.$api.get(global.apiUrls.productlist, {
                                // status:this.current,
                                page: this.page,
                                pagesize: this.loadingnum,
                                type: 2,
                            })
                            .then(res => {
                                const {
                                    productlist
                                } = this;
                                if(res.data.code == 1){
                                //延迟加载数据 减少并发量
                                    setTimeout(() => {
                                        //结束加载
                                        this.loadings = false;
                                        this.productlist = [...productlist, ...res.data.data.data]
                                        this.send = false;
                                    }, 700)
                                    this.page++;
                                }else{
                                    this.$message.info('诶呀,加载失败了稍后再试试吧');
                                    this.send = false;
                                }
                            }).catch(err => {
                                // console.log(res)
                                this.send = false;
                            })
                    } else {
                            this.nodata = true;    //当加载完没数据后 显示无更多数据                            
                    }
                }
            }
        },

在methods中写第一次获取数据的方法

//获取数据
            getproductlist() {
                this.$api.post(global.apiUrls.productlist, {
                        page: 1,
                        pagesize: this.loadingnum,
                        type: 2, //获取数据类型  
                    })
                    .then(res => {
                        console.log(res.data, 1111111111)
                        if(res.data.code == 1){
                            this.productlist = res.data.data.data;
                            this.last_page = res.data.data.last_page;
                            if (res.data.data.last_page == 1) {
                                this.nodata = true;
                            }
                        } else{
                            this.$message.info('唉,获取数据失败了');
                            this.nodata = true;
                        }                        
                    }).catch(err => {
                        console.log(res)
                    })
            },

onLoad里面调用 getproductlist , 不要放在onShow里面，因为一般都上拉加载处都是列表，点击是可以进入详情页的，如果放到onShow里面会造成每次从详情页返回都会重新获取数据，造成页面刷新，以及内容回到最上面。

this.getproductlist();//获取数据

如果有一个界面有其他分类的，在切换类型时，切记要重置 page（上拉起始页），也可以将总页数和上拉起始页一起重置，可以在切换方法里加入

this.page = 2;//将上拉起始页重置到 2   **这部是必须要有的**
this.last_page = '',//将总页数置空

如果页面有下拉刷新,同样切记一定要将 page重置到2 代码同上;

加载特效使用了uview组件
底部loading 和无更多数据
html

<view class="loading" v-show="loadings">
            <view class="loading-san">
                <u-loading size="40" color="#FFBA4B" ></u-loading>
                <view class="logintext">一大波玩偶正在赶来~~</view>
            </view>
        </view>
        <view class="nodata" v-show="nodata">
            没有更多数据
        </view>

css

//加载
    .loading {
        width: 100%;
        height: 100upx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #F6F7F9;
        .loading-san {
            display: flex;
            justify-content: space-around;
            align-items: center;
            .logintext {
                margin-left: 16upx;
                font-size: 28upx;
                font-family: PingFang;
                color: #999999;
            }
        }
    }
    //没有更多数据
    .nodata {
        width: 100%;
        height: 100upx;
        background-color: #F6F7F9;
        text-align: center;
        line-height: 100upx;
        color: #999999;
        font-size: 24upx;
        font-family: PingFang SC;
        font-weight: 400;
    }