<!doctype html>
转自轻轻简记，http://www.qingqingjianji.com/article.html?aid=54
<html>
<head>
<meta charset="UTF-8">
<title>vue分页加载数据</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta name="x5-orientation" content="portrait" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-appearance: none;
outline: none;
word-break: break-all;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
width: 100%;
font-family: "PingFang SC-Medium,sans-serif", "Noto Sans CJK SC,sans-serif", Arial, "Microsoft YaHei";
font-size: 100px;
background-color: #f5f5f5;
}
body {
font-size: 62.5%;
height: 100%;
line-height: 1;
}
ul, ol, li {
list-style: none;
}
[v-cloak]{
display: none;
}
.cont-item{
padding: 0.35rem 0.1rem;
font-size: 0.14rem;
color: #666;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<ul>
<li v-for="item in list"><h6>{{item.zh_atitle}}</h6></li>
<!-- 滚动加载 -->
<li class="cont-item loading" v-show="showLoading">{{loadTxt}}</li>
<!-- 点击加载 -->
<!-- <li class="cont-item loading" v-on:click="getData">{{loadTxt}}</li> -->
</ul>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/zepto/1.1.5/zepto.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.12/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
data: {
list:[],
page:1,//当前页码
pageTotal:0,//总页数
pageSize:8,//每页加载条数
loadTxt:"加载中···",
showLoading:false
},
mounted: function() {
var self = this;
self.init();
//如果是点击加载的话注销滚动事件
self.initEvent();
},
methods: {
init: function(){
var self = this;
self.getData();
},
initEvent: function(){
var self = this;
$(window).on("scroll", function(){
var articleHeight = $("#app").height();
var windowHeight = $(this).height();
var scrollTop = $(this).scrollTop();
if(articleHeight - windowHeight <= scrollTop && !self.showLoading){
self.getData();
}
});
},
getData: function(){
var self = this;
if(self.page > self.pageTotal && self.pageTotal != 0) return;
self.showLoading = true;
$.ajax({
type: 'post',
url: "http://",
crossDomain: true,
dataType: 'json',
data: {
page: self.page,
pagesize: self.pageSize
},
success: function(data) {
if(data && data.start == '0'){
if(data.total){
self.pageTotal = Math.ceil(+data.total/self.pageSize);
}
if(self.pageTotal == 0 || !data.total){
self.loadTxt = '暂无数据';
}else{
//点击加载
//self.loadTxt = "点击加载更多";
if(self.list.length > 0){
self.list = self.list.concat(data.body);
}else{
self.list = data.body;
}
}
self.page++;
if(self.page > self.pageTotal){
self.loadTxt = "我也是有底线的";
}else{
self.showLoading = false;
}
}else{
alert(data.errorMsg || "系统异常");
}
}
});
}
},
watch: {}
}).$mount("#app")
</script>
</body>
</html>
网友评论