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

2. 在需要使用 fhtwl-miniprogram-pagination 的页面 page.json 中，添加配置引入分页组件：

{
  "usingComponents": {
    "pagination": "fhtwl-miniprogram-pagination"
  }
}

3. 在 wxml 文件中使用

<pagination wx:if="{{pages > 0}}" bind:pageChange="pageChange" pages="{{pages}}"></pagination>

4. 在 js 文件中监听page切换

    pageChange({details}){
        console.log("页码改变时传到父组件的值", e);
        const current = detail;
        this.setData({
            current
        })
        // 刷新数据
        // this.getListData()
    }

属性介绍

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

事件介绍

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