uni |
您所在的位置：网站首页 › vue列表分页 › uni |
uni
|
uni-app使用官方pagination组件实现分页效果
写uni-app的时候遇到数据量大 需要分页的地方 上百度查看了很多文档 有懒加载 上拉加载 下拉刷新 觉得太麻烦了 没必要做的复杂 意外上官方插件库看见了官方写的pagination组件 真的很奈斯 简单好用 1. 先下载官方插件 官方插件链接 可以选择自己导进去或者easycom引入 如果是自己导入的把文件放在 components 里面 2. 页面模板引用 3. 页面js引用 import uniPagination from "@/components/uni-pagination/uni-pagination.vue" export default { components: { uniPagination }, data() { return { // 分页参数 total: '', current: 1 } }, methods:{ // 列表 getList() { this.$http({ url: '', // 路径 method: "POST", data: { PageIndex: this.current, PageSize: 10, }, success: function(res) { if (res.data.Code === 1000) { this.tableData = res..data; // 页面上需要渲染的list this.total = res.total // 获取到接口返回的总数 } else { _this.$tips(res.data.Message); } } }) }, // 分页点击事件 handlePage(params) { // console.log(params) 可以打印看看params this.current = params.current; this.getList() // 点击的时候去请求查询列表 } } }4. 实现效果 |
【本文地址】
今日新闻 |
推荐新闻 |