1.0.4 • Published 3 years ago
fhtwl-miniprogram-pagination v1.0.4
fhtwl-miniprogram-pagination
微信小程序自定义分页组件
样式风格类似pc端,能显示页码和上一页、下一页、首页、尾页等等。
TIP
传参只需要传总页数pages即可
page切换的回调事件为pageChange,返回值为e.detail为当前页码
BUG
组件通过监听pages变化更新组件。因此父组件里pages未变化时,不要更新pages,否则会有bug
pages小于1时,会显示异常。请不要让pages小于1,或者小于1时不渲染组件
使用方法
- 安装fhtwl-miniprogram-pagination
npm install --save fhtwl-miniprogram-pagination
- 在需要使用 fhtwl-miniprogram-pagination 的页面 page.json 中,添加配置引入分页组件:
{
"usingComponents": {
"pagination": "fhtwl-miniprogram-pagination"
}
}
- 在 wxml 文件中使用
<pagination wx:if="{{pages > 0}}" bind:pageChange="pageChange" pages="{{pages}}"></pagination>
- 在 js 文件中监听page切换
pageChange({details}){
console.log("页码改变时传到父组件的值", e);
const current = detail;
this.setData({
current
})
// 刷新数据
// this.getListData()
}
属性介绍
属性名称 | 类型 | 默认值 | 是否必须 | 说明 |
---|---|---|---|---|
pages | Number | 1 | 否 | 总页码。注意pages必须大于0 |
事件介绍
事件名称 | 参数 | 说明 |
---|---|---|
pages | Object | 页码变化事件 |