uniapp上拉加载数据

uniapp 上拉加载数据

template

<scroll-view class="orderlist" scroll-y="true" lower-threshold="30" @scrolltolower="scrollLower">
     //列表内容
</scroll-view>

js

data(){
    return{
        currentPage: 1,
        pageSize: 10,
        total:0,
        orderList:[],//列表数据
    }
},
methods:{
    scrollLower(){
            if(this.orderList.length>=this.total){
                    this.$message.toast("已经是最后一页啦");
            }else{
                    this.currentPage++
                    this.getQueryOrderList();	
            }
    },
    	getQueryOrderList() {
            // 获取订单列表
            this.$http.post("接口", {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
            }).then((res) => {
                    this.orderList = [...this.orderList,...res.result.records]
                    this.total = res.result.total
            })

    },
}

css

position: absolute;
bottom: 0;
top:80rpx;
left: 0;
right: 0;