前端vue里面点击加载更多_vue 原生添加滚动加载更多

vue中添加滚动加载更多，因为是单页面所以需要在跳出页面时候销毁滚动，要不会出现错乱。我们在mounted建立滚动，destroyed销毁滚动。

mounted () {

window.addEventListener('scroll', this.handleScroll)

destroyed () {

window.removeEventListener('scroll', this.handleScroll)

定义一个函数，在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度，在加载后如果列表长度为0时应该停止加载，要不会出现一直加载的情况

handleScroll () {

//变量scrollTop是滚动条滚动时，距离顶部的距离

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

//变量windowHeight是可视区的高度

var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

//变量scrollHeight是滚动条的总高度

var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;

//滚动条到底部的条件

if(scrollTop+windowHeight==scrollHeight &&this.list.length !==0){

this.loadMore() // 加载的列表数据

}

前端vue里面点击加载更多_vue 原生添加滚动加载更多相关推荐

前端vue里面点击加载更多_js实现『加载更多』功能实例
DEMO : 滚动加载示例关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
Android中fragment A里面点击button跳转到fragment B实现方法
在我们做项目的时候总是会有一些需求,改动.前段时间有个需求是首页的一个按钮点击跳转进入一个fragment,这个fragment和首页属于同一级. eg:也就是说我的首页几个fragment,首页记为 ...
微信小程序实现分页加载，触底加载下一页，滚动加载
这里我就不写wxml了,就是一个列表循环,直接看js代码逻辑,注释都写在代码后面了,这个方法可以实现无限滚动加载,直到加载完最后一条数据,也可以实现触底没数据后,二次触底可以从新加载刷新,学废了就给个 ...
vue点击按钮怎么跳转图片_vue-router组件里面点击一个按钮跳转到一个新的组件该怎么实现...
展开全部直接修改地址栏中的路由地址即可: {{msg}} var testLogin = Vue.component("login",{ template:` 这是我的登录页面 ...
解决ECSHOP后台订单里面点击编辑配送方式时出现的警告问题
警告内容:Warning: number_format() expects parameter 1 to be double, string given in D:\wamp\www\ecshop_o ...
前端Vue项目中点击a标签实现下载文件到本地的功能
点击a标签可实现下载图片或者是文件到本地的功能 1.根据后台提供的接口url下载文件到本地 <a :href="后台给接口提供的文件的url地址">点击下载文件< ...
Web前端-Vue ElementUI点击Table 索引行获取index处理
需求:在table中row行 index = 0 ,作为区头,数据字符展示 "--" 参考组件 Element - The world's most popular Vue UI ...

前端vue里面点击加载更多_vue 原生添加滚动加载更多

前端vue里面点击加载更多_vue 原生添加滚动加载更多相关推荐

最新文章

热门文章