简介
wx-pager是一款基于微信小程序开发的轻量级分页组件，方便开发者实现在小程序中的列表分页。
安装
使用npm安装wx-pager：
npm install wx-pager --save
使用
在小程序的page.json中添加：
{
"usingComponents": {
"wpager": "wx-pager"
}
}在小程序的wxml文件中使用：
-- -------------------- ---- ------- ---- ---- --- ------- ----------------- --------------------- ----------------- -------------------------------- ---- ------- --- ------- ----------------- --------------------- ----------------- ------------ -------------------- --------------------- ----------------------- ------------ -------------- -------------- ---------------------- ---------------------- - ---------
其中，bind:change为自定义事件，当用户点击上一页或下一页时触发，并将当前页码传递给事件处理函数。
属性说明
- total: {Number} 总页数
- current: {Number} 当前页码
- limit: {Number} 每页显示的数据条数
- color: {String} 组件文字颜色，默认为 #007aff
- background: {String} 组件背景颜色，默认为 #fff
- activeColor: {String} 当前页码文字颜色，默认为 #fff
- activeBackground: {String} 当前页码背景颜色，默认为 #007aff
- size: {String} 组件尺寸，默认为 28rpx
- prevText: {String} 上一页按钮文字，默认为 "<"
- nextText: {String} 下一页按钮文字，默认为 ">"
- hidePageNumber: {Boolean} 是否隐藏分页数字，默认为 false
示例代码
<view class="list">
<view class="item" wx:for="{{list}}">
......
</view>
</view>
<wpager class="pager" total="{{total}}" current="{{current}}" limit="{{limit}}" color="#fff" background="#007aff" activeColor="#007aff" activeBackground="#fff" size="30rpx" prevText="上一页" nextText="下一页" hidePageNumber="false" bind:change="loadData"></wpager>-- -------------------- ---- -------
-- ------
-------- -------------------- ------ -
------ --- --------------- -- -
------------- -- -
----- ----- - -------- - -- - ----- - --
----- ---- - ------------ ------- ----- -- --- -- -- --
--- ----- - --
----- ----- ------- - ---
----
--------------
-- ------
---
-
------
----- -
----- ---
------ --
-------- --
------ --
--
-------- -
----------------
--
----- ---------- -
----------------
------ --------
---
----- - -------- ----- - - ----------
----- ---- - ----- -------------------- -------
----- ----- - ------------- - -------
--------------
----- -----
-----
---
-----------------
-
---总结
wx-pager是一款方便易用的小程序分页组件，开发者可以快速地在小程序中使用它来实现列表分页，并且支持自定义样式。本篇文章对其使用方法进行了详细介绍，希望能对小程序开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671158dd3466f61ffe65c