fhtwl-miniprogram-pagination

fhtwl
js
fhtwl-miniprogram-pagination JS library on npm Download fhtwl-miniprogram-pagination JS library

微信小程序分页组件

Version 1.0.4 License ISC Vulnerabilities 0
fhtwl-miniprogram-pagination has no homepage
fhtwl-miniprogram-pagination JS library on GitHub
fhtwl-miniprogram-pagination JS library on npm
Download fhtwl-miniprogram-pagination JS library
Keywords
miniprogrampagination
<script type="module"> import fhtwlMiniprogramPagination from 'https://cdn.jsdelivr.net/npm/fhtwl-miniprogram-pagination@1.0.4/+esm' </script>
Learn more

fhtwl-miniprogram-pagination

微信小程序自定义分页组件

样式风格类似pc端,能显示页码和上一页、下一页、首页、尾页等等。

TIP

  1. 传参只需要传总页数pages即可

  2. page切换的回调事件为pageChange,返回值为e.detail为当前页码

BUG

  1. 组件通过监听pages变化更新组件。因此父组件里pages未变化时,不要更新pages,否则会有bug

  2. pages小于1时,会显示异常。请不要让pages小于1,或者小于1时不渲染组件

使用方法

  1. 安装fhtwl-miniprogram-pagination
npm install --save fhtwl-miniprogram-pagination
  1. 在需要使用 fhtwl-miniprogram-pagination 的页面 page.json 中,添加配置引入分页组件:
{
  "usingComponents": {
    "pagination": "fhtwl-miniprogram-pagination"
  }
}
  1. 在 wxml 文件中使用
<pagination wx:if="{{pages > 0}}" bind:pageChange="pageChange" pages="{{pages}}"></pagination>
  1. 在 js 文件中监听page切换
    pageChange({details}){
        console.log("页码改变时传到父组件的值", e);
        const current = detail;
        this.setData({
            current
        })
        // 刷新数据
        // this.getListData()
    }

属性介绍

属性名称 类型 默认值 是否必须 说明
pages Number 1 总页码。注意pages必须大于0

事件介绍

事件名称 参数 说明
pages Object 页码变化事件