<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>load-more-vue</title>
<script type="text/javascript" src="https://cdn.bootcss.com/zepto/1.1.7/zepto.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.14/vue.js"></script>
<script type="text/javascript">
var param = {
props:['fetch','end'],
data:function(){
return {
loading:false
}
},
template:'<div class="load-more"><div v-if="!end">加载中...</div><div v-if="end">我也是有底线的</div></div>',
mounted:function(){
var self = this;
(window).off('scroll',self.scroll);
},
methods:{
scroll:function(){
var self = this;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop,
innerHeight = window.innerHeight || document.body.clientHeight,
loadHeigth = el).height(),
isEnd = document.body.scrollHeight - scrollTop - innerHeight;
//两种判断都可以
//if(document.body.scrollHeight - innerHeight <= scrollTop && !self.loading && !self.end){
if(isEnd < loadHeigth && !self.loading && !self.end){
self.loading = true;
//self.query();
//模拟Ajax请求响应时间
setTimeout(function(){self.query();},1000);
}
},
query:function(){
var self = this;
self.fetch(function(){
self.loading = false;
});
}
}
}
Vue.component('load-more',param);
</script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">
<div>
<h6>{{item}}</h6>
</div>
</li>
<load-more :fetch="fetch" :end="end"></load-more>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
list:[],
page:1,
pageSize:20,
end:false
},
mounted:function(){
this.fetch();
},
methods:{
createData:function(){
function list(){
var arry = [];
for(var i = 0; i <=20; i++){
arry.push(Math.random());
}
return arry;
}
var data = list();
return {
responseCode:'0',
list:data,
responseMsg:'success'
}
},
fetch:function(callback){
var self = this;
var res = self.createData();
if(res.responseCode == 0){
if(self.page>1){
self.list = self.list.concat(res.list);
}else{
self.list = res.list;
}
self.end = res.list.length<self.pageSize;
callback && callback();
self.page++;
//模拟结束条件
if(self.page == 5){
self.end = true;
}
}else{
console.log(res.responseMsg)
}
}
}
})
</script>
</body>
</html>
vue加载更多组件
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 源站：http://fengyuanchen.github.io/viewer/ 应用： html: 源码上是正常...
- 找到fullcalendar.js， 找到代码为 isRTL：false，这句话 输入以下几句 monthName...
