<template>
<div @touchmove="loading"> 下拉事件
</div>
</template>
在data里面定义
data() {
return {
homeData: [], 页面所有数据
pageIndex: 1, 页面下来的页数
flag: true, 节流
};
},
//页面下拉加载
async loading() {
console.log("页面滚动距离的高", document.documentElement.scrollTop);
console.log("网页视口的高", window.screen.height);
console.log("网页可见区域的高", document.body.offsetHeight);
//思路: 滑动鼠标(页面滚动距离的高)+(网页视口的高 就是页面显示的高) 大于获取大于 (网页可见区域的高 - 30 是让他触发的条件)
if ( document.documentElement.scrollTop + window.screen.height >= document.body.offsetHeight - 30) {
if (this.flag) { //判断条件
this.flag = false;
let url = "https://easy-mock.com/mock/5cb68c827ccf7c060b2270da/api/newgoods";
await axios .get(url, {
params: {
page: ++ this.pageIndex
}
}).then(res => {
if (res.data.data.length == 0) { //下拉到底触发
this.flag = false
return false; //下拉到底无法在下拉记载
}
for (let i = 0; i < res.data.data.length; i++) {
this.homeData.push(res.data.data[i]);
}
console.log(this.homeData);
this.flag = true;
}).catch(error => {
console.log("下拉列表失败");
});
}
}
}
vue下拉刷新 节流防抖
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1、节流（throttle）: 创建一个节流函数，在等待时间内最多执行 一次的函数2、防抖（debounce）：创...
- 最近接到一个需求，实现起来很简单，但是考虑到性能问题，需要花一些技巧。 页面性能优化，分别应用到：事件委托、动态数...
- vue目前是众所周知的流行框架大家都知道的，vue全家桶的成员是：vue-cli,vuex,vue-router,...
- (一) vue的生命周期 https://segmentfault.com/a/1190000008010666 ...
