vue实现移动端分页
Vue实现移动端分页的方法
使用第三方库实现分页
移动端分页可以使用第三方库如vant或mint-ui，这些库提供了现成的分页组件，适合快速开发。
安装vant库：
npm install vant引入分页组件：
import { Pagination } from 'vant';
Vue.use(Pagination);在模板中使用：
<van-pagination
v-model="currentPage"
:total-items="total"
:items-per-page="pageSize"
@change="handlePageChange"
/>自定义分页组件
如果需要更灵活的分页逻辑，可以自定义分页组件。定义一个Pagination组件，包含页码按钮和上一页/下一页按钮。
模板部分：
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span v-for="page in pages" :key="page" @click="goToPage(page)" :class="{ active: currentPage === page }">
{{ page }}
</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>脚本部分：
export default {
props: {
total: Number,
pageSize: Number,
currentPage: Number
},
computed: {
totalPages() {
return Math.ceil(this.total / this.pageSize);
},
pages() {
const range = [];
for (let i = 1; i <= this.totalPages; i++) {
range.push(i);
}
return range;
}
},
methods: {
prevPage() {
if (this.currentPage > 1) {
this.$emit('page-changed', this.currentPage - 1);
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.$emit('page-changed', this.currentPage + 1);
}
},
goToPage(page) {
this.$emit('page-changed', page);
}
}
};结合后端API实现分页
移动端分页通常需要与后端API交互，通过传递页码和每页大小参数获取数据。
示例代码：
methods: {
fetchData(page) {
axios.get('/api/data', {
params: {
page: page,
size: this.pageSize
}
}).then(response => {
this.dataList = response.data.list;
this.total = response.data.total;
});
},
handlePageChange(page) {
this.fetchData(page);
}
}无限滚动分页
移动端常见无限滚动分页，滚动到底部时自动加载下一页数据。
使用v-infinite-scroll指令：
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</div>脚本部分：
data() {
return {
list: [],
page: 1,
busy: false
};
},
methods: {
loadMore() {
this.busy = true;
axios.get('/api/data', {
params: {
page: this.page,
size: 10
}
}).then(response => {
this.list = this.list.concat(response.data.list);
this.page++;
this.busy = false;
});
}
}样式优化
移动端分页组件需要适配小屏幕，样式应简洁且易于点击。
CSS示例：
.pagination {
display: flex;
justify-content: center;
padding: 10px;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
}
.pagination span {
margin: 0 5px;
padding: 5px 10px;
cursor: pointer;
}
.pagination .active {
font-weight: bold;
color: #1989fa;
}通过以上方法，可以在Vue中实现适合移动端的分页功能，根据需求选择合适的方式。
