uni-app上拉加载更多分页数据（核心：滚动条触到底部时page+1; 使用concat()或者push()都能实现）

1、文档加载完成时显示第一页的数据，当滚动条下拉触到底部时加载下一页且数据追加到上一页中。

（这个例子包含了tab切换，使用push() 方法实现）

<template>
    <view class="container prohibition">
        <view class="demo" :style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
            <view class="left" :style="'top:' + demo.top + 'px'">
                <view class="iconfont icon-zuo" @tap='backleft'></view>
            </view>
            <view class="clr_fff">我的订单</view>
        </view>

        <view class="pd_t123">

            <!-- 顶部导航栏 -->
            <view class="horizonal-tab">
                <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
                    <block v-for="(item,index) in tabBars" :key="index">
                        <view class="scroll-tab-item" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
                            {{item.name}}
                            <view class="scroll-tab-line"></view>
                        </view>
                    </block>
                </scroll-view>
            </view>

            <!-- 内容区 -->
            <view class="">
                <!-- 滑块视图 -->
                <view class="content">
                    <view class="items">
                            <view class="item" v-for="(items,index1) in queryList" :key="index1">                            
                            <view class="orderid">
                                <text class="title">订单号：{{items.order_no}}</text>
                                <view>
                                    <image class="sucessImg" src="https://test134.vrapp.chot.cn/mini/picture/135_57.png" mode="widthFix"></image>
                                </view>
                            </view>

                            <view class="infor uni-flex">
                                <view>
                                    <image class="orderPrdImg" mode="widthFix" @error="errImg" :src="items.goods_logo"></image>
                                </view>
                                <view class="infordt">
                                    <view class="title">{{items.goods_title}}</view>
                                    <view class="price">¥{{ items.price_real }}元/天</view>
                                    <view class="num">x{{ items.number_goods }}</view>
                                </view>
                            </view>
                            <view class="pay">
                                实付款：¥{{items.price_real * items.number_goods}}
                            </view>
                            <view class="btn">
                                <button @tap="order_detail(index1)">查看订单</button>
                                <button>再次购买</button>
                                <button v-show="hidden == false">立即评价</button>
                            </view>
                        </view>
                    </view>
                    <uni-load-more :status="status" :content-text="contentText" />
                </view>
            </view>


        </view>

    </view>
</template>

<script>
    import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
    export default {
        components: {
            uniLoadMore
        },
        data() {
            return {
                tabIndex: 0,
                /* 选中标签栏的序列,默认显示第一个 */
                page: 1,
                pageSize: 3,
                hidden: false,
                status: 'more',
                contentText: {
                    contentdown: '上拉加载更多',
                    contentrefresh: '加载中.....',
                    contentnomore: '没有更多数据啦'
                },
                tabBars: [{
                        name: '全部',
                        id: 'guanzhu'
                    },
                    {
                        name: '待付款',
                        id: 'tuijian'
                    },
                    {
                        name: '预约成功',
                        id: 'redian'
                    },
                    {
                        name: '已完成',
                        id: 'tiyu'
                    }

                ],
                demo: {
                    top: 0,
                    height: 0
                },
                data: {},
                queryList: [],
                newArrayData: []
            }
        },
        onLoad() {
            var status = ''
            this.getOrderList(status);// 默认显示第一页的数据即可
        },
        created() {
            const demo = uni.getMenuButtonBoundingClientRect()
            this.demo.top = demo.top
            this.demo.height = demo.height
        },
        onReachBottom(e) {
            this.page++; //滚动条触到底部时page+1
            if(this.tabIndex==0){
                var status = ''; 
                this.getOrderListMore(status); //加载的数据
            }else if(this.tabIndex==1){
                var status = 2; 
                this.getOrderListMore(status); //加载的数据
            }else if(this.tabIndex==2){
                var status = 1; 
                this.getOrderListMore(status); //加载的数据
            }else if(this.tabIndex==3){
                var status = 5; 
                this.getOrderListMore(status); //加载的数据
            }
            
        },
        methods: {
            backleft(e) {
                uni.navigateBack();
            },
            order_detail(index) {
                uni.setStorageSync('order_no', this.queryList[index].order_no);
                uni.navigateTo({
                    url: '../orderDetail/orderDetail'
                })
            },
            errImg() {
                this.queryList.forEach((val) => {
                    if (val.goods_logo.length == 29) { // 图片不完整路径
                        val.goods_logo = 'https://test134.vrapp.chot.cn/mini/picture/orderImg.png';
                    }
                    if (val.number_goods == null || val.goods_title == null || val.price_real == null) {
                        val.number_goods = 1;
                        val.price_real = 0;
                        val.goods_title = '居家生活料理套餐'
                    }
                });
            },
            navsHandleClick(i) {
                console.log(i);
                this.current = i;
            },
            intervalChange(e) {
                this.current = e.detail.current;
            },
            //切换选项卡
            toggleTab(index) {
                this.tabIndex = index;
                this.page = 1; // 切换tab时page从1开始

                if (this.tabIndex == 1) {
                    this.hidden = true;
                } else {
                    this.hidden = false;
                }
                switch (this.tabIndex) {
                    case 1:
                        var status = 2 // 待付款
                        this.getOrderList(status);
                        break;
                    case 2:
                        var status = 1 // 预约成功
                        this.getOrderList(status);
                        break;
                    case 3:
                        var status = 5 // 已完成
                        this.getOrderList(status);
                        break;
                    default:
                        var status = '' // 默认显示全部列表
                        this.getOrderList(status);
                        break;
                }
            },
            //滑动切换swiper
            tabChange(e) {
                console.log(e);
                this.tabIndex = e.detail.current;
            },
            //获取订单信息
            async getOrderList(status) {
                const mid = uni.getStorageSync('mid');
                let data = {
                    operate: 'Order.index',
                    mid: 1,
                    page: this.page,
                    status: status
                }
                const res = await this.$myRequset({
                    url: '/api',
                    method: "POST",
                    data: data
                })
                this.queryList = res.data.data.list.list;
                let pages = Math.ceil(res.data.data.list.count / this.pageSize);
                if (this.page == pages) {
                    this.status = "nomore";
                }
            },
            async getOrderListMore(status) {
                const mid = uni.getStorageSync('mid');
                let data = {
                    operate: 'Order.index',
                    mid: 1,
                    page: this.page,
                    status: status
                }
                const res = await this.$myRequset({
                    url: '/api',
                    method: "POST",
                    data: data
                })
                for(var i=0;i<res.data.data.list.list.length;i++){                    
                    this.queryList.push(res.data.data.list.list[i]); // 加载的数据追加在上一页后面
                }
                let pages = Math.ceil(res.data.data.list.count / this.pageSize);
                if (this.page == pages) {
                    this.status = "nomore";
                }
            }
        }
    }
</script>


下面的Demo相对较为简单，代码较为简单，接口是加载一次调用一次，但是直接调用方法不用写两遍。

<template>
    <view>
        <view class="demo" :style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
            <view class="left" :style="'top:' + demo.top + 'px'">
                <view class="iconfont icon-zuo" @tap='backleft'></view>
            </view>
            <view class="top_title">健康百科</view>
        </view>
        <view class="pd-t135">
            <view class="head_cont">
                <image :src="fullImg"></image>
                <text class="head_title">{{full_title}}</text>
            </view>
        </view>
        <view class="list">
            <view class="uni-padding-wrap backWhite wauto80" v-for="(item,index) in infoList" :key="index">
                <view class="uni-flex info_item">
                    <view class="info">
                        <view class="title">
                            <span class="tag">{{item.label}}</span>
                            <text>{{ item.title }}</text>
                        </view>
                        <view class="des">
                            <text class="newsdata">{{ item.create_time }}</text>
                            <image class="w23" src="../../static/images/news_eye.png"></image> <text class="newsdata">{{ item.number }}</text>
                        </view>
                    </view>
                    <view class="imgRignt">
                        <image class="newsImg" :src="item.thumb"></image>
                    </view>
                </view>
            </view>
            <uni-load-more :status="status" :content-text="contentText" />
        </view>
    </view>
</template>

<script>
    import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
    export default {
        name: "news",
        components: {
            uniLoadMore
        },
        data() {
            return {
                demo: {
                    top: 0,
                    height: 0
                },
                infoList: [],
                fullImg: '',
                full_title: '',
                contentText: {
                    contentdown: '上拉加载更多',
                    contentrefresh: '加载中.....',
                    contentnomore: '没有更多数据啦'
                },
                page: 1,
                status: 'more',
                pageSize: 1,
            }
        },
        onLoad() {
            this.getList();
        },
        created() {
            const demo = uni.getMenuButtonBoundingClientRect()
            this.demo.top = demo.top
            this.demo.height = demo.height
            uni.setNavigationBarColor({
                frontColor: '#000000',
                backgroundColor: '#000000'
            })
        },
        onReachBottom() {
            this.page++;
            if (this.status != 'more') {
                return false;
            }
            this.status = 'more'; //设置sataus是更多
            this.getList(); //加载的数据
        },
        methods: {
            backleft(e) {
                uni.navigateBack();
            },
            async getList() {
                const res = await this.$myRequset({
                    url: '/api',
                    data: {
                        operate: 'News.index',
                        page: this.page
                    }
                });
                let banner = res.data.data.list.one;
                this.full_title = banner.title;
                this.fullImg = banner.thumb;
                let resList = res.data.data.list.list;
                let list = this.setTime(resList);
                this.infoList = this.infoList.concat(list);
                for (let i = 0; i < this.infoList.length; i++) {
                    if (this.infoList[i].label === '') {
                        this.infoList[i].label = '生活'
                    } else {
                        this.infoList[i].label = this.infoList[i].label.substr(0, 2);
                    }
                }
                let pages = Math.ceil(res.data.data.list.count / this.pageSize);
                if (this.page == pages) {
                    this.status = "nomore";
                }
            },
            setTime: function(items) {
                var newItems = [];
                items.forEach(e => {
                    newItems.push({
                        title: e.title,
                        label: e.label,
                        thumb: e.thumb,
                        create_time: e.create_time,
                        number: e.number
                    });
                });
                return newItems;
            },
        }
    }
</script>