下拉触底

常用参数

scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、
scrollTop（滚动条滚动距离）、
clientHeight（窗口可视范围高度）。
当 clientHeight + scrollTop >= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。

在js里

scrollHeight：可以通过 document.documentElement.scrollHeight 、document.body.scrollHeight 获取;
clientHeight：可以通过window.innerHeight 、 document.documentElement.clientHeight 获取;
scrollTop：可以通过window.pageYOffset 、 document.documentElement.scrollTop 获取;

vue里

// listDom 是在template里绑定的，用来表示当前元素// 文档内容的实际高度let blockScrollHeight = this.$refs['listDom'].scrollHeight;// 滚动条滚动高度let blockScrollTop =  this.$refs['listDom'].scrollTop;// 可视窗口高度let blockClientHeight =  this.$refs['listDom'].clientHeight;

上面参数，就足够应对大部分功能了

下面是三者的关系

判断上滑下滑

常用参数

scrollTop（滚动条滚动距离）

// listDom 是在template里绑定的，用来表示当前元素// 滚动条滚动高度let blockScrollTop =  this.$refs['listDom'].scrollTop;

初始化一个变量，用来记录每次的scrollTop
用当前的scrollTop - 上次的scrollTop。
如果大于零，则代表向下滑动(因为向下滑动，当前的scrollTop是相比于上次的scrollTop是增大的，所以差值大于零)
– 如果小于零，则代表向上滑动(因为向上滑动，当前的scrollTop是相比于上次的scrollTop是减小的，所以差值小于零)

data:{return {scroolCount: 0
}
}
const scroll = blockScrollTop - this.scroolCount;
this.scroolCount = blockScrollTop;
if(scroll < 0){console.log('向下滑动');this.$store.commit('scrollLockFlag', true);}

vue下拉触底，判断上滑下滑相关推荐

移动端H5下拉触底事件异常处理
手机端下拉触底事件异常 $(window).scroll(function(){//下拉事件var windowH = $(window).height();//设备可见区域高度var documen ...
解决iOS11上从状态栏下拉或底部栏上滑，跟系统的下拉通知中心手势和上滑控制中心手势冲突
转自:https://cloud.tencent.com/community/article/322940 第六点有时候你的App需要控制从状态栏下拉或者底部栏上滑,这个会跟系统的下拉通知中心手势 ...
微信小程序页面事件 - 下拉刷新与上拉触底
一.下拉刷新 1.概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为. 2. 启用下拉刷新启用下拉刷新有两种方式: ①全局开启下拉刷新在 app.j ...
【微信小程序】-—下拉刷新、上拉触底事件详细讲解
1.页面事件–下拉刷新事件 1.1什么是下拉刷新下拉式移动端的专有名词,指的是通过手指子在屏幕上的下拉滑动操作,从而重新加载页面数据 2.启动下拉刷新 (1)方法一:全局开启下拉刷新在app.js ...
【微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件
1.下拉刷新事件 1. 什么是下拉刷新下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为 2. 启用下拉刷新启用下拉刷新有两种方式: ① 全局开启下拉刷新 ...
【微信小程序】上拉触底事件
上拉触底手指在屏幕上的上拉滑动操作从而加载更多数据页面上拉触底事件触发时距页面的距离默认50px (滚动条距离底部的距离自动加载更多数据)"onReachBottomDistanc ...
vue判断组件是否显示_Vue组件实现触底判断
本文实例为大家分享了Vue组件实现触底判断的具体代码,供大家参考,具体内容如下非常简陋的代码,以后有空回来完善子组件代码: export default { name:'Scroll', meth ...
微信小程序下拉触底卡顿
做小程序案例的时候,发现像下图这样写,下拉触底时不会立即弹出toast轻提示,需要往上滑一下,再往下滑才出现轻提示(感觉像卡顿一下似的),而后判断条件改成>=则解决下拉触底卡顿问题
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...

vue下拉触底，判断上滑下滑

下拉触底

常用参数

下面是三者的关系

判断上滑下滑

常用参数

vue下拉触底，判断上滑下滑相关推荐

最新文章

热门文章