使用vue.js制作分页组件(2)

主要是个对于 组件事件的运用，=最常见的click事件，以及class与style的绑定，根据 curPageIndex与this.pageIndex来比较，判断是否拥有这个class,通过computed计算属性，来获得 页码数组 因为会根据当前页 有所变化，created的时候 计算出总页码。
最后一个是 目前生成获取静态数据的js文件.

// let data = { // avatar: '', 头像 // name: '', 用户名 // context: '', 评论内容 // } let dataArr = []; function randomStr (len) { return Math.random().toString(36).substr(len); } function initData () { for (var i = 0; i<45 ; ++i) { let _avator = "./resources/" + i%7 + ".jpg"; let _name = randomStr(20); let _context = randomStr(2); dataArr.push({ avatar: _avator, name: _name, context: _context }); } } if (!dataArr.length) { initData(); } export function getCommentData (url = '', params = null, isSync = true, curPageIndex = 1, eachPageSize = 7) { /* ajax */ let st = (curPageIndex - 1) * eachPageSize; let end = st + eachPageSize; return dataArr.slice(st, end); } export function getTotalCommentCount(url = '', params = null, isSync = true) { /* ajax */ return dataArr.length; } export function getTotalPageCount(url = '', params = null, isSync = true, eachPageSize = 7) { /* ajax */ return Math.floor((dataArr.length + eachPageSize -1 ) / eachPageSize); }

就这样了吧。

github地址

您可能感兴趣的文章: