恳请:
1. 标注哪里写数据请求,哪里写判断高度,看了一些人家写的小段代码,我思路还是很混乱
2.我目前只写到加载列表,图片文字,有按页码写的api接口,不会分页和滑动加载(代码附图)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="node_modules/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
font-size: 62.5%;
}
#app ul{
list-style: none;
padding: 0 2rem;
}
#app ul li{
display: block;
height: 5rem;
padding: 2rem 0;
border-bottom: 0.1rem solid #eee;
overflow: hidden;
}
#app ul li img{
float: left;
width: 8rem;
height: 5rem;
margin-right: 2rem;
}
#app ul li .title{
font-size: 1.2rem;
}
#app ul li .time{
font-size: 1rem;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items" >
<img :src="item.url">
<p class="title">{{ item.createdAt}}</p>
<p class="time">{{ item.publishedAt }}</p>
</li>
</ul>
</div>
<script type="text/javascript">
$.ajax({
url:'https://www.apiopen.top/meituApi?page=4',
type:'GET',
dataType:'json',
success:function(data, status){
var pictures = data['data']
console.log(pictures[0]['url'])
new Vue({
el:'#app',
data:{
items:pictures,
},
})
},
async:true
})
</script>
</body>
</html>
无非都是根据scroll进行判断的,比如超过预定的scroll值,append一个loading的dom,就可以了,网上有很多ui框架,可以直接使用,具体的你也可以查看gitHub源码
这里给你列举两个:
mint-ui
iscroll--结合jquery