uni

2023-12-17 14:01| 来源: 网络整理| 查看: 265

从Dclould下载的插件链接:简单实用的分页器 - DCloud 插件市场

data() { return { page: { total: '', //总页数 pageSize: 10, //每页条数 pageNum: 1 //默认当前页 } } },

//监听页数变化 change(pageNum, type) { this.page.pageNum = pageNum; console.log("点击了" + type + "，当前页：" + pageNum); }

后台将数据存放在数组里通过向后台发送当前页数以及每页的条数来请求数据

//设备分页(封装了接口 queryPage方法) export const queryPage = (pageNum, pageSize) => { return request({ //拿着参数去请求数据 url: `system/camera/list/last?pageNum=${pageNum}&pageSize=${pageSize}`, }) } methods:{ //预加载第一页数据 onFstPage() { queryPage(this.page.pageNum, this.page.pageSize).then(res => { console.log(res); this.list = res.rows //总页 this.page.total = res.total }) }, //监听页数变化点击了页数就要请求一下 change(pageNum, type) { this.page.pageNum = pageNum; console.log("点击了" + type + "，当前页：" + pageNum); //实现点击加载相应页 queryPage(this.page.pageNum, this.page.pageSize).then(res => { this.page.pageNum = pageNum; this.list = res.rows }) } }, onLoad(){ this.onFstPage() //自动加载 }

效果:

写死的每页10条数据(插件封装的好像也是10条) 如果要换成别的的话可能还要拿获取的总数据再÷一下叭

【本文地址】

uni

uni

今日新闻

推荐新闻