Skip to content
20:40

Pager - 分页

简介

  1. 支持两种分页模式,按照 总页数分页 pages、总数量分页 total 两种模式分页,根据接口返回数据为 total 或 pages。
  2. 支持判断数据是否为空 empty
  3. 支持判断上拉加载数据状态 loadmore
  4. 支持判断是否还有更多数据 hasMore

分页说明

  • 初始化分页实例类,new Pager(page, limit) page默认第1页,limit默认每页20条数据
  • 接口入参一般为 当前页 page 或 偏移量 offset、每页数量 limit
  • 接口返回一般为 总页数 pages 或 总数量 total

配置

如果需要,开启下拉刷新

json
{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页",
    "enablePullDownRefresh": true
  }
}

页面配置

html
<template>
  <col-layout>
    <u-empty v-if="pager.empty()" />
	  <view v-else>
		  <view v-for="item in page.data" :key="item.id">{{ item.name }}</view>
	  </view>
    <!-- 底部显示加载状态 -->
    <u-loadmore :status="pager.loadmore()" />
  </col-layout>
</template>

<script>
import { Pager } from 'colorful-uni'

export default {
  data() {
    return {
      // 参数1:page默认第1页,参数2:limit默认每页20条数据
      pager: new Pager(1, 20) 
    }
  },
  // 上拉加载
  onReachBottom() {
    if (this.pager.hasMore()) {
      this.getList()
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    // 重置分页所有状态
    this.pager.reset()
    this.getList()
  },
  onLoad(options) {
    this.getList()
  },
  methods: {
    // 按照总页数分页
    getListByPage() {
      const { page, limit } = this.pager
      this.$api.getList({ page, limit }).then(res => {
        uni.stopPullDownRefresh()
        if (res.code === 200) {
          const { list, pages } = res
          this.pager.setData(list).setPages(pages)
        }
      })
    },
    // 按照总数量分页
    getListByTotal() {
      const { offset, limit } = this.pager
      this.$api.getList({ offset, limit }).then(res => {
        uni.stopPullDownRefresh()
        if (res.code === 200) {
          const { list, total } = res
          this.pager.setData(list).setTotal(total)
        }
      })
    }
  }
}
</script>

<style lang="scss"></style>

API

Data

名称类型说明默认值
pageNumber当前页1
limtNumber每页限制数量20
pagesNumber总页数0
totalFunction总数量0
data[Object, Array]数据源[]
offsetNumber偏移量0
emptyBoolean是否为空true

Methods

名称类型说明
constructorFunction构造器 new Pager(page=1, limit=20)
setPageFunction当前页
setLimitFunction每页限制数量
setDataFunction追加数据源[Object, Array]
resetDataFunction重置数据源
setPagesFunction总页数
setTotalFunction总数量
hasMoreFunction是否还有下一页
loadmoreFunction加载状态: more,loading,noMore,配合uview loadmore组件使用
resetFunction重置分页所有状态