UNIAPP – Component – Uni – Pagination Pagoe

Official example: https://ext.dcloud.net.cn/plugin?id=32

The paging face component to display page numbers, request data, etc.

1. Main features

1d34c2b03cd805a584e0216cc782f492

f61148c5d2dfc206468ca786f346a535

<template>
	<view>
		<uni-pagination :total="60"/>
		<Uni-Pagination: Total = "50" Prev-Text = "Предыдущая страница" Next-Text = "следующая страница" />
		<uni-pagination :show-icon="true" :total="50" />
	</view>
</template>

Second, event binding

985a7337b17cae5fd9ca3a612cdedca3

14b706d8ebfd0f39e98957f27eb214a4

<template>
	<view>
		<uni-pagination :current="current" :total="total" :show-icon="true" @change="change" />
		 <Text> текущая страница: {{Current}}, общие данные: {{Total}} полоса, каждая страница данных: {{ pageSize }}</text>
		 <button type = "primary" @click = "добавить"> добавить </button>
		 <button type = "default" @click = "сбросить"> сбросить данные </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>

Leave a Comment