小程序使用scroll-view实现分页功能

wxml

<!-- pages/applyRecord/applyRecord.wxml -->
<view class="container">
    <scroll-view
        scroll-y
        bindscrolltolower="onScrollToLower"
        style="height: 100vh; -webkit-overflow-scrolling: touch;" 
        lower-threshold="50"
        scroll-with-animation
    >
        <view class="list">
            <block wx:for="{{list}}" wx:key="id">
                <view class="list-item">
                    <view class="list-item__header">{{item.showDate}}</view>
                    <view class="list-item__content">
                        <view class="list-item__row">
                            <text class="list-item__row-title">用餐人姓名</text>
                            <text>{{item.empName || '-'}}</text>
                        </view>
                        <view class="list-item__row">
                            <text class="list-item__row-title">餐厅名称</text>
                            <text>{{item.cantName || '-'}}</text>
                        </view>
                        <view class="list-item__row">
                            <text class="list-item__row-title">餐别</text>
                            <text>{{item.mealName || '-'}}</text>
                        </view>
                        <view class="list-item__row">
                            <text class="list-item__row-title">套餐</text>
                            <text>{{item.mealSetName || '-'}}</text>
                        </view>
                        <view class="list-item__row">
                            <text class="list-item__row-title">价格(元)</text>
                            <text>{{(item.famount || 0) / 100}}</text>
                        </view>
                    </view>
                </view>
            </block>
            <view wx:if="{{loading}}" class="loading">加载中...</view>
            <view wx:if="{{finished}}" class="finished">没有更多了</view>
        </view>
    </scroll-view>
</view>

js

const { getOrders: getList } = require('../../api/meal');
const moment = require('../../utils/moment');

Page({
    data: {
        condition: {
            payStatus: 1, // 0为待支付，1为已支付，目前固定传1
        },
        queryForm: {
            page: 1, // 分页
            pageSize: 10,
        },
        loading: false, // 是否处在加载状态
        finished: false, // 是否已加载完成
        error: false, // 是否加载失败
        list: [], // 列表
        total: 0, // 数据总条数
    },

    onLoad() {
        console.log('userInfo', getApp().globalData.userInfo);
        this.loadList();
    },

    tranDate(dateStr) {
        if (!dateStr) return '-';
        return moment(dateStr, "YYYYMMDD").format("YYYY年MM月DD日");
    },

    loadList() {
        if (this.data.loading || this.data.finished) return;

        const params = Object.assign({}, this.data.queryForm, {
            condition: JSON.stringify(this.data.condition),
        });
        this.setData({ loading: true });
        getList(params).then((data) => {
            const { res } = data;
            const list = res.list.map((ele)=>{
                ele.showDate = this.tranDate(ele.mealDate)
                return ele 
            }) || [];
            this.setData({
                list: this.data.list.concat(list),
                finished: res.pages == this.data.queryForm.page || res.pages == 0,
                queryForm: { ...this.data.queryForm, page: this.data.queryForm.page + 1 }
            });
        }).finally(() => {
            this.setData({ loading: false });
        });
    },

    onScrollToLower() {
        this.loadList();
    },

    onRefresh() {
        this.setData({
            finished: false, // 清空列表数据
            queryForm: { ...this.data.queryForm, page: 1 }, // 分页数赋值为1
            list: [] // 清空数组
        });
        this.loadList(); // 重新加载数据
    }
});

wxss

.container {
    padding: 0 16px;
}

.list-item {
    background-color: #fff;
    border-radius: 12px;
    margin: 12px 0 0 0;
    padding: 12px 16px;
}

.list-item:last-child {
    margin: 0;
}

.list-item__header {
    font-size: 14px;
    margin: 4px 0 8px;
    color: #333;
    font-weight: bold;
}

.list-item__content {
    font-size: 12px;
}

.list-item__row {
    display: flex;
    justify-content: space-between;
    color: #555;
    line-height: 20px;
}

.list-item__row-title {
    min-width: 100px;
    font-weight: bold;
}

.list-item__footer {
    text-align: right;
}

.loading {
    text-align: center;
    padding: 20px 0;
    color: #999;
}

.finished {
    text-align: center;
    padding: 20px 0;
    color: #999;
}