HTML+VUE分页实现炫酷物联网大屏功能
效果
demo.html
数据大屏 物联网平台数据统计page
page. js
var page_data = { key: null, pointId: null, limit: 6, total: 0, //总条数 pageIndex: 1, //第x页 totalPage: 0, // 总共页数, activatePage: 1, //激活页 默认为1 currentPage: 1, //当前页数 ,默认为1 pagelist: 7, //分页按钮个数 pageSize: 10, // 每页显示数量 mid: 3, //点击按钮 分页按钮重新渲染时的位置 一般 是 pagelist /2 居中 factoryHeader: [{ "categories": "站点名" }, { "categories": "企业名" }, { "categories": "状态" }, { "categories": "操作" } ], factory: [], timer: null //定时器 }; var page_vue = new Vue({ el: '#page', data: page_data, beforeCreate: () => { // this.send(); console.log("创建前page_data") }, created: () => { // this.dtu(); console.log("创建完成page_data") }, beforeMount: () => { }, mounted() { this.timer = setInterval(() => { setTimeout(this.getCurrentPageData(), 0) }, 1000 * 10) console.log("挂载完成page_data:"); }, beforeUpdate() { console.log('=即将更新渲染page_data='); }, destroyed() { clearInterval(this.timer); this.timer = null; }, watch: {}, methods: { /* 监测列表 */ getCurrentPageData: function() { axios({ headers: { 'Content-Type': 'application/json' }, async: true, method: 'post', url: 'https://www.shbykj.top/bi/monitor/data', data: { 'page': page_vue.$data.currentPage, 'limit': page_vue.$data.limit, } }) .then(function(res) { console.log(res.data.data); if (res.data.data) { page_vue.$data.factory = res.data.data.data page_vue.$data.total = res.data.data.total console.log(".this.total" + page_vue.$data.total) let begin = (page_vue.$data.currentPage - 1) * page_vue.$data.pageSize; let end = page_vue.$data.currentPage * page_vue.$data.pageSize; this.mid = Math.floor(page_vue.$data.pagelist / 2); //这里自己diy请求数据 console.log("dataListLength总条数::::::" + page_vue.$data.total) console.log("pageSize每页条数::::::" + page_vue.$data.limit) //总页数 page_vue.$data.totalPage = page_vue.$data.total % page_vue.$data.limit == 0 ? page_vue.$data.total / page_vue .$data.limit : Math.floor(page_vue.$data.total / page_vue.$data.limit) + 1 console.log("totalPage总页数:" + page_vue.$data.totalPage) } }) .catch(function(error) { console.log("大屏监控列表查询异常" + error); }); }, // 设置当前页面数据,对数组操作的截取规则为[0~9],[10~20]..., // 当currentPage为1时,我们显示(0*pageSize+1)-1*pageSize,当currentPage为2时,我们显示(1*pageSize+1)-2*pageSize... //上一页 prevPage() { console.log(this.currentPage); if (this.currentPage === 1) { return false; } else { this.currentPage--; if (this.activatePage !== 1) { if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) { this.activatePage = this.currentPage - this.mid; } } this.getCurrentPageData(); } }, // 下一页 nextPage() { if (this.currentPage === this.totalPage) { return false; } else { if (this.activatePage !== this.totalPage - this.pagelist + 1) { if (this.currentPage >= (this.pagelist - this.mid)) { this.activatePage = this.currentPage - this.mid + 1; } } this.currentPage++; this.getCurrentPageData(); } }, selectPage(event, msg) { //计算 是往前还是往后移动 let gap = (this.activatePage + msg - 1) - this.currentPage; //把 当前页更新 this.currentPage = this.activatePage + msg - 1; if (this.currentPage > this.totalPage) { this.currentPage = this.totalPage; } if (this.currentPage < 1) { this.currentPage = 1; } //如果是 往前移动 需要 判断两种情况 第一种 如果移动到的下一步 加上 显示的页码按钮数 超出了 总页码数 //那么 我们就 把 页码按钮的起始更新为 页码数 - 页码按钮显示数 + 1 //如果小于等于 那么把 页码按钮更新为点击的页码按钮 if (gap > 0 && (this.currentPage + this.pagelist - 1) > this.totalPage) { this.activatePage = this.totalPage - this.pagelist + 1; } else if (gap > 0 && (this.currentPage + this.pagelist - 1) <= this.totalPage) { //对 最小需要调整按钮的边界进行判断 if (this.currentPage >= (this.pagelist - this.mid)) { this.activatePage = this.currentPage - this.mid; } } //和上面 一样 我们需要判断 点击分页按钮的 索引 如果点击按钮的数 - 分页按钮的个数 小于0了 那我们 把 分页按钮其实位置改成0 //否则的 话 就直接 更新成 点击按钮的索引 if (gap < 0 && (this.currentPage - this.pagelist + 1) <= 1) { this.activatePage = 1; } else if (gap < 0 && (this.currentPage - this.pagelist + 1) > 1) { //对 最大需要调整按钮的边界进行判断 if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) { this.activatePage = this.currentPage - this.mid; } } var el = event.currentTarget; this.getCurrentPageData(); } } })
结构
以上就是HTML+VUE分页实现炫酷物联网大屏功能的详细内容,更多关于html分页大屏的资料请关注潘少俊衡其它相关文章!
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/HTML/72294.html