不用插件vue实现滚动加载
关键所在是实现滚动到底部,然后进行post请求,然后将获得的分页的数据push到数组中1,在data中定义三个变量page,isadd,data_wrpa其中page是控制分页的,isadd是控制是否post的,data_wrpa是数据的容器2,给容器绑定scroll事件<ul class="left_li_ul" @scroll="gd_add&quo
关键所在是实现滚动到底部,然后进行post请求,然后将获得的分页的数据push到数组中
1,在data中定义三个变量page,isadd,data_wrpa其中page是控制分页的,isadd是控制是否post的,data_wrpa是数据的容器
2,给容器绑定scroll事件
<ul class="left_li_ul" @scroll="gd_add">
<li v-for="(item,index) in huifang_li" @click="left_li(index)" class="left_li1">
<div>
<div class="hf_username">{{item.username}}</div>
<div><img :src="item.sex" alt="" style="width: 20px;height: 20px;"></div>
<div>{{item.age}}</div>
<div><img :src="item.dengji" alt="" style="width: 20px;height: 20px;"></div>
</div>
<div>
<div>{{item.data}}</div>
<div class="hf_beizhu">{{item.beizhu}}</div>
</div>
</li>
</ul>
3.在methods中写这个方法
gd_add(){
let wrap_height=$('.left_li_ul').height(); //容器的高度
let scroll_top=$('.left_li_ul').scrollTop(); //滚动条的scrolltop
let scroll_height=$('.left_li_ul').prop('scrollHeight'); //内容的高度
let is_height=scroll_height-wrap_height-scroll_top-125 //判断是否为0,既是否到了底部(这里的-125是因为我定了个padding-bottom=125,所以要减掉)
if (is_height==0&&this.isadd) {
this.page++;
this.isadd=false;
$.post('',{page:this.page},function(json){ //具体怎么处理数据自行解决吧,情况不一样
for(let i=0;i<json.length;i++){
this.huifang_li.push(json[i])
}
})
console.log(this.page)
}
},
4,注意初始的时候需要渲染page=0的数据,所以在mounted钩子函数中先请求一下数据并渲染
mounted(){
$.post('',{page:this.page},function(json){
for(let i=0;i<json.length;i++){
this.huifang_li.push(json[i])
}
})
},
ok就是这么简单!!
更多推荐
所有评论(0)