526互联

uniapp 列表分页显示 - uni-pagination

发布时间 2023-06-20 16:12:11作者: 柠檬-不加糖

1. 先去 HX 市场下载并导入插件，由于这个插件是官方插件，所以并不需要引入，只需要重新编译（ module 模块 ）

https://ext.dcloud.net.cn/plugin?id=32

2. 页面的引用，代码可直接复制，小修改 => views 模块

//分页显示, queryParams 需要换成你自己的 query
<view v-show="total>0" style="font-size: 24rpx;text-align: center;padding: 20rpx 0;">
              当前第{{ queryParams.pageNum }}页，共计：{{ total }}条，每页数据：{{ queryParams.pageSize }}条</view>

 // 分页功能

<uni-pagination :total="total" :current="queryParams.pageNum" :pageSize="queryParams.pageSize" @change="change"
              v-show="total>10" />

//返回顶部

<view class="wrap">
              <u-back-top :scroll-top="scrollTop" :bottom="120"></u-back-top>
            </view>

//没有数据的时候的显示 => 这里的 tableData 需要换成你自己的数组

<u-empty text="暂无数据" mode="list" v-if="tableData.length==0" style="min-height: 1100rpx;"></u-empty>

//页面弹窗提醒

<u-toast ref="uToast" />

 

3. data 数据层部分

scrollTop: 0,
queryParams: { //列表传参
                    pageNum: 1,
                    pageSize: 10,
                    data: {},
                },
                total: 0,
tableData: [],

4. method 方法部分

//下拉刷新
            change(e) {
                this.queryParams.pageNum = e.current //注意的传参要对应你 data 部分的 query 传参
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300,
                    complete: () => {
                        this.getSelectAlarmList() //调用列表接口
                    }
                })
            },