小程序&&uniapp - 实现分页（上拉加载下拉刷新）

 

<script>
    export default {
        data() {
            return {
                listQuery: {
                    pageNo: 1,
                    pageSize: 10,
                }, //分页
                list: [], //列表
                totalPage: 1 //当前页
            };
        },
        onLoad() {
            this._orderRecord()
        },
        methods: {
            /*获列表
             * @params this.listQuery 分页数据
             */
            _orderRecord() {
                let that = this;
                if (this.listQuery.pageNo === 1) this.list = [];
                this.$api.api.orderRecord(this.listQuery).then(res => {
                    setTimeout(function() {
                        uni.hideLoading();
                        that.list = that.list.concat(res.list);
                        that.totalPage = res.totalPage
                    }, 500);
                });
            },

            /* 上拉加载 */
            onReachBottom() {
                uni.showLoading({
                    title: '加载中'
                });
                if (this.totalPage <= this.listQuery.pageNo) {
                    uni.hideLoading();
                    uni.showToast({
                        title: '没有更多了',
                        duration: 2000,
                        icon: 'none'
                    });
                    return
                }
                this.listQuery.pageNo += 1;
                this._orderRecord()
            },



            /* 下拉刷新 */
            onPullDownRefresh() {
                this.listQuery.pageNo = 1;
                this._orderRecord();
            },
        }
    };
</script>