uniapp分页组件：H5、小程序、app分页组件

1、在vue页面引入组件

2、页面使用组件

3、接口分页回调

以下是全部代码示例

<template>
    <view class="page">
        <view style="margin: 20rpx 0; display: flex;justify-content:space-around;">
            <view style="width: 49%;">
                <view class="dateInput" :style="inputDate?'':'color: #A4A6AB;'" @click="dateShow=true">
                    {{inputDate||'请选择日期'}}
                </view>
            </view>
            <view style="width:49%;">
                <u-search v-model="queryData.phone" shape="square" placeholder="手机号" :clearabled="true"
                    input-align="center" bg-color="#fff" border-color="#ECEDF1" action-text="搜索" height="72"
                    :action-style="searchBtn" @search="phoneChange" @custom="phoneChange"
                    @clear="phoneChange"></u-search>
            </view>
        </view>
        <data-list ref="list" @load="getRecycleRecord" @refresh="getRecycleRecord" @refresherpulling="refresherpulling">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="title">{{item.addressName}} {{item.addressPhone}}</view>
                <view class="address">{{item.address}}</view>
                <view class="content">
                    <view class="content-item">
                        <view class="item-1">预计重量(kg)</view>
                        <view class="item-2">{{item.count}}</view>
                    </view>
                    <view class="line"></view>
                    <view class="content-item">
                        <view class="item-1">预计金额(元)</view>
                        <view class="item-2">{{item.amount}}</view>
                    </view>
                </view>
                <view class="bottom">
                    <view class="time">{{item.recyclingTime}}</view>
                        <view class="btn" @click="nav(`/pages/huishou/weigh_huishou?recyclingId=${item.recyclingId}`)">回收称重</view>
                </view>
            </view>

        </data-list>

        
        
        <!-- 时间范围picker -->
        <u-calendar v-model="dateShow" mode="range" @change="dateChange"></u-calendar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                queryData: {
                    pageNo: 1,
                    pageSize: 10,
                    recyclingStatus: 1,
                    phone:'',
                    startTime:'',
                    endTime:''
                },
                list: [],
                inputDate: "",
                searchBtn:{
                    background:"#5B95FF",
                    color:"#fff",
                    width:"100rpx",
                    height:"72rpx",
                    lineHeight:"72rpx",
                    borderRadius: "4rpx",
                },
                dateShow:false,
            }
        },
        mounted() {},
        methods: {
            phoneChange(name) {
                this.queryData.phone = name;
                this.$refs.list.refreshData()
            },
            dateChange(e) {
                console.log('dateChange=============', e)
                this.inputDate = `${e.startDate}/${e.endDate}`
                this.queryData.startTime = e.startDate+' 00:00:00'
                this.queryData.endTime = e.endDate+' 23:59:59'
                this.$refs.list.refreshData()
            },
            nav(url) {
                uni.navigateTo({
                    url: url
                })
            },
            refresherpulling() {

            },
            getRecycleRecord(data, callback) {
                this.$u.api.getRecycleRecord(this.queryData).then(res => {
                    if (data.page == 1) {
                        this.list = []
                    }

                    let total = 0;
                    if (res.code == 200) {
                        this.list = [...this.list, ...res.data.records];
                        total = res.data.total
                    }

                    callback({
                        list: this.list,
                        total: total
                    })
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        background-color: #F9F9F9;
        height: 100vh;
        width: 100vw;
        padding: 25rpx;

        .dateInput {
            border: 1px solid #E4E6EB;
            border-radius: 2px;
            height: 72rpx;
            // line-height: 60rpx;
            // text-align: center;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item {
            background-color: #fff;
            border-radius: 8px;
            // margin: 20rpx;
            padding: 25rpx;

            .title {
                font-size: 30rpx;
                color: #333333;
                font-weight: 600;
            }

            .address {
                margin-top: 16rpx;
                background: url('@/static/huishou/dz.png') no-repeat;
                background-size: 28rpx 28rpx;
                padding-left: 34rpx;
                height: 28rpx;
                line-height: 24rpx;
                color: #999999;
                font-size: 24rpx;
            }

            .content {
                margin-top: 32rpx;
                background-color: #F5F7FB;
                border-radius: 4px;
                display: flex;
                justify-content: space-around;
                padding: 28rpx 0;

                .content-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .item-1 {
                        font-size: 24rpx;
                        color: #666666;
                    }

                    .item-2 {
                        font-size: 28rpx;
                        font-weight: 600;
                        color: #333333;
                    }
                }

                .line {
                    width: 1px;
                    height: 32px;
                    background: #E3E7EE;
                }
            }

            .bottom {
                margin-top: 20rpx;
                display: flex;
                justify-content: space-between;

                .time {
                    height: 60rpx;
                    line-height: 60rpx;
                    color: #999999;
                    font-size: 24rpx;
                }

                .btn {
                    width: 150rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    background: #5B95FF;
                    border-radius: 3px;
                    color: #fff;
                    text-align: center;
                    font-size: 24rpx;
                }
            }
        }
    }
</style>