直接贴代码
前台
<div id="courseList">
<div id="content" v-cloak>
<div class="div-relative" id="a" v-for="item in currentPageData">
<div class="bg1" :style="{backgroundImage: 'url(' + item.image + ')'}"></div>
<div class="bg2"></div>
<div class="bg3" @click="onclick(item)">
<h4>{{ item.name }}</h4>
<p>{{ item.deptName }}</p>
<p>{{ item.cotypeName }}</p>
<p>{{ item.tetyName }}</p>
</div>
</div>
</div>
<nav aria-label="">
<ul class="pager">
<li id="prev"><a href="#"><span aria-hidden="true">←</span>Previous</a></li>
<li id="next"><a href="#">Next<span aria-hidden="true">→</span></a></li>
</ul>
</nav>
</div>
js分页代码
var courses = new Vue({
el: "#content",
data: {
courses: [], //所有课程数据
currentPageData: [], //当前页显示内容
totalPage:1, //页面数量
currentPage:1, //当前页号
pageSize: 8 //每一页显示数据量
},
created: function () {
this.getCourses();
},
methods: {
getCourses: function () {
var that = this;
axios.get("获取数据的链接").then(
function (response) {
console.log(response.data.data);
that.courses = response.data.data;
for (var i = 0; i < response.data.data.length; i++) {
// 如果没有图片,则使用默认图片
if (response.data.data[i].image === null)
response.data.data[i].image = "img/noPic.jpg";
else
response.data.data[i].image = "图片网址前缀" + that.courses[i].image;
//console.log(that.courses[i].image);
}
//计算一共有多少页
that.totalPage = Math.ceil(that.courses.length / that.pageSize);
//当计算结果为0时设置页号为1
that.totalPage = that.totalPage === 0 ? 1 : that.totalPage;
that.setCurrentPageData();
console.log(that.currentPageData);
/*上一页*/
$("#prev").click(function () {
console.log(that.currentPage);
if (that.currentPage === 1)
return;
that.currentPage--;
that.setCurrentPageData();
});
/*下一页*/
$("#next").click(function () {
console.log(that.currentPage);
if (that.currentPage === that.totalPage)
return;
that.currentPage++;
that.setCurrentPageData();
});
}
)
},
setCurrentPageData: function () {
let begin = (this.currentPage - 1)* this.pageSize;
let end = this.currentPage * this.pageSize;
this.currentPageData = this.courses.slice(begin, end);
},
onclick: function (courseInfo) {
console.log(courseInfo);
window.localStorage.setItem("id", courseInfo.id);
window.location.href = "front_course.html";
}
}
});