1.0.4 • Published 3 years ago

fhtwl-miniprogram-pagination v1.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

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()
    }

属性介绍

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

事件介绍

事件名称参数说明
pagesObject页码变化事件
1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago