uniapp 列表分页显示 - uni-pagination，下拉和 分页二选一即可

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() //调用列表接口
                    }
                })
            },

 4-1. 注意参数部分需要替换

?

1 2 3 4 5 6 7 8 9 10 11 12

onReachBottom() {   ++this.query.pageNum //注意替换 query   this.getList("dropDown") //列表接口，传参是必须的   if (this.total <= this.listData.length) { //注意替换 total 和 table     setTimeout(() => {       this.$refs.uToast.show({         title: '没有数据啦',         type: 'success',       })     }, 300)   } },

　　

4-2.注意 type 判断的写法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

getList(type) {         if (type == 'dropDown') { //注意type 传参，如果有type就增加，没有就请求           getExamList(this.query).then(res => {             if (res.code == 200) {               this.listData = this.listData.concat(res.rows)                               this.total = res.total             } else {               this.$refs.uToast.show({                 title: res.msg,               })             }           }).catch(() => {})         } else {           getExamList(this.query).then(res => {             if (res.code == 200) {               this.listData = res.rows               this.total = res.total             } else {               this.$refs.uToast.show({                 title: res.msg,               })             }           })         }         },

　　

 

5.table表格模板

<uni-table
        ref="table"
        border
        emptyText="暂无数据">
      <uni-tr>
        <uni-th  align="center">  </uni-th>

      </uni-tr>
      <uni-tr v-for="(item, index) in tableData" :key="index">
        <uni-th align="center" >  </uni-th>

      </uni-tr>
    </uni-table>