vue HTML内使用触底加载

let that = this;window.onscroll = function () {let getDocumentTop = that.getDocumentTop();let getWindowHeight = that.getWindowHeight();let getScrollHeight = that.getScrollHeight();console.log(getDocumentTop,getWindowHeight, getScrollHeight);//监听事件内容if (getScrollHeight == getWindowHeight + getDocumentTop) {//当滚动条到底时,这里是触发内容//异步请求数据,局部刷新domthat.pageNum += 1;that.acquire();}} //文档高度getDocumentTop() {var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;if (document.body) {bodyScrollTop = document.body.scrollTop;}if (document.documentElement) {documentScrollTop = document.documentElement.scrollTop;}scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;return scrollTop;},//可视窗口高度getWindowHeight() {var windowHeight = 0;if (document.compatMode == "CSS1Compat") {windowHeight = document.documentElement.clientHeight;} else {windowHeight = document.body.clientHeight;}return windowHeight;},//滚动条滚动高度getScrollHeight() {var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;if (document.body) {bodyScrollHeight = document.body.scrollHeight;}if (document.documentElement) {documentScrollHeight = document.documentElement.scrollHeight;}scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;return scrollHeight;}

vue HTML内使用触底加载相关推荐

Vue 列表懒加载触底加载
一.方法一描述:列表懒加载+节流效果图: 实现: 组件:LazyLoading <template><div class="lazy-list">< ...
列表如何做，看这一篇就够啦——触底加载、虚拟滚动与计算展现值
我们作为前端,平时遇到的一大类工作就是展现各种的数据,而列表就是其中一个基础而通用的形式,无论是像Google.百度这样的搜索引擎,到像Facebook.Twitter.掘金这样的用户社区,抑或是像美 ...
vue-infinite-scroll 实现触底加载
说明如果项目中需要实现触底加载,可以使用vue-infinite-scroll来实现. 安装通过下面的命令可以进行安装: npm install vue-infinite-scroll -S 配置 ...
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...
微信小程序开发使用onreachBottom实现页面触底加载及分页
目录一简要介绍一下onreachBottom事件二实例展示三遇到的一些问题一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样, ...
lin-ui实现瀑布流的触底加载
触底加载效果实现思路触底加载更多的细节: 触底: 监测触底事件在触底之后执行一系列动作加载数据: 在触底后需要向服务器请求数据,如果已经请求到了所有数据,应该不再发送请求. 加载状态: 请求数据 ...
微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
目录一.头像上传 1.选择图片 wx.chooseImage() 2.上传文件 wx.uploadFile() 二.瀑布流+下拉刷新+触底加载三.分包加载什么是分包为什么要使用分包如 ...
uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
uniapp触底加载
文章目录一.onReachBottom()函数首先,在page.json的style下设置然后在页面使用即可,与生命周期函数同一级别二.在子组件中使用滚动区域scrow-view触底加载 1. ...
一个简单的适用于Vue的下拉刷新，触底加载组件
话不多说,直接上代码,原文地址博客地址 <template><div class="list-warp-template"@touchstart="h ...

vue HTML内使用触底加载

vue HTML内使用触底加载相关推荐

最新文章

热门文章