Vue制作下拉刷新和数据对接

这里使用的Vue的方式是<script src="Vue.min.js"></script>直接引入的。

<div>
<ul>
<li v-for="item in allArr" :key="item.id">{{item.name}}<img :src="item.imgSrc" \></li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data() {
return {
allArr: [], // 需要遍历的数组
p:1, // 页数
resLength:'10', //获取多少条数据，用于判断是否继续请求下一页
};
},
created() {
this.getProList(); // 第一次调用加载首页
　　　　//监听滚动
window.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
　　　　//判断滚动到底部
// 这里的id是容器的id
if ($(window).scrollTop() >=$('#tab1').height() - $(window).height()) {
if (this.resLength == 10) { // 判断接受的数据是否等于10条等于的话继续请求数据
this.p++; // 设置页数加1
this.getProList(this.p); //执行ajax请求，把页数传入
}
}
},
// 全部请求
getProList() {
var that = this;
$.ajax({
url:"/index.php", // 请求地址
type:'POST', //请求类型 POST或GET
async:true, //或false,是否异步
data:{
page : this.p, // 发送页数到后台
pagesize:10 // 发送每页获取条数
// 以上两条根据后台需求修改
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式：json/xml/html/script/jsonp/text
beforeSend:function(xhr){
// console.log('发送前')
},
success:function(res){
// console.log(res)
console.log('请求成功回调')
if (res.status == 1) {
let data = res.res;
// 设置每次获取条数
that.resLength = data.length;
// 上拉加载把获取到的每一项数据push进数组中
for (var i = 0; i < data.length; i++) {
that.allArr.push(data[i]);
};
}
else{
console.log(data.message);
}
},
error:function(xhr,textStatus){
// console.log('错误')
},
complete:function(){
// console.log('结束')
}
})
}
}
})
</script>

米扑博客

Macintosh Chrome 62.0.3202.94

8 年前

2017-12-08 9:18:36

实用的技术，受用了

淘宝天猫优惠券大全

Windows Chrome 55.0.2883.87

8 年前

2017-12-02 17:00:36

纯技术贴，厉害了

发送评论编辑评论

评论

发送评论 编辑评论

推荐文章

发送评论编辑评论