日志
vue 实现滑动底部加载
||
使用vue实现页面中某块区域滑动到底部加载数据。
1、给要滑动的部分绑定滑动监听事件
<!-- 绑定scroll滑动事件 -->
<div class="goodLists" @scroll="scrolltobottom">
<div class="goodItem" v-for="product in productList" @click="goToPage('goodsdetail',product.code)">
<img :src="product.imgUrl" >
<div class="goodInfo">
<h3 class="goodNum">编号:{{product.code}}</h3>
<p class="goodTitle">{{product.name}}</p>
2、监听滑动到底部，执行加载数据的方法
//监听滑动到底部
scrolltobottom(){
var goodp = $('.goodLists').scrollTop(); //用于计算窗口相对于滚动条顶部的偏移
var goodh = $('.goodLists').height(); //用于计算当前窗口的高度
var sh = ($('.goodItem').height()+10)*this.productList.length; //获取一个商品所占高度，乘以商品的个数，即滚动条总高度
if (goodp+goodh>=sh-3 && this.page>1) {
//根据页面来查询
this.getProductList(this.page);
}
}
