uniapp组件-uni-pagination分页器

浅浅的花香味﹌ 2021-07-25 11:31 1792阅读 0赞

官方示例：[https://ext.dcloud.net.cn/plugin?id=32][https_ext.dcloud.net.cn_plugin_id_32]

Pagination 分页器组件，用于展示页码、请求数据等。

## 一、基本属性 ##

![20210301220836322.gif][]

![20210301220855352.png][]

## 二、绑定事件 ##

![20210301221054904.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		<uni-pagination :current="current" :total="total" :show-icon="true" @change="change" />
    		<text>当前页：{
       { current }}，数据总量：{
       { total }}条，每页数据：{
       { pageSize }}</text>
    		<button  type="primary" @click="add">增加</button>
    		<button  type="default" @click="reset">重置数据</button>
    	</view>
    </template>
    
    <script>
    export default {
    	components: {},
    	data() {
    		return {
    			current: 1,
    			total: 0,
    			pageSize: 10
    		};
    	},
    	methods: {
    		add() {
    			this.total += 10;
    		},
    		reset() {
    			this.total = 0;
    			this.current = 1;
    		},
    		change(e) {
    			this.current = e.current;
    		}
    	}
    };
    </script>

[https_ext.dcloud.net.cn_plugin_id_32]: https://ext.dcloud.net.cn/plugin?id=32
[20210301220836322.gif]: https://img-blog.csdnimg.cn/20210301220836322.gif
[20210301220855352.png]: https://img-blog.csdnimg.cn/20210301220855352.png
[20210301221054904.gif]: https://img-blog.csdnimg.cn/20210301221054904.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210301221155975.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70