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 原生添加滚动加载更多的更多相关文章

  1. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  2. Vue——轻松实现vue底部点击加载更多

    前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...

  3. jquery weui ajax滚动加载更多

    手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...

  4. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  5. vue mpvue 上拉加载更多示例代码

    vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...

  6. vue项目上滑滚动加载更多&下拉刷新

    上滑滚动时获取内容高度.屏幕高度和滚动高度(此处#sslist要为内容是id) 内容高度  let innerHeight = document.querySelector("#sslist ...

  7. Vue.js中滚动条加载更多数据

    本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...

  8. 微信小程序实现滚动加载更多

    1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...

  9. vue+element ui 滚动加载

    <div id="app"> <div class="infinite-list-wrapper" style="overflow: ...

随机推荐

  1. angular 子路由跳转出现Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run() 的问题修复

    angular 路由功能非常强大,同时angular的路由也非常脆弱,非常容易出现错误. 那么在我们遇到异常时,首先要做的是什么? 第一步:检查代码,对比官方文档,发现代码中不一致的地方进行改正. 第 ...

  2. calendar类-时间处理类

    calendar类 calendar类是时间处理类 比如在scala中 //字符串转化日期格式 val df = new SimpleDateFormat("yyyy-MM-dd hh:mm ...

  3. Andriod Studio设置类默认签名模板

  4. animate.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Arthas - Java 线上问题定位处理的终极利器

    前言 在使用 Arthas 之前,当遇到 Java 线上问题时,如 CPU 飙升.负载突高.内存溢出等问题,你需要查命令,查网络,然后 jps.jstack.jmap.jhat.jstat.hprof ...

  6. 从函数计算架构看 Serverless 的演进与思考

    作者 | 杨皓然  阿里巴巴高级技术专家 导读:云计算之所以能够成为 DT 时代颠覆性力量,是因为其本质是打破传统架构模式.降低成本并简化体系结构,用全新的思维更好的满足了用户需求.而无服务器计算(S ...

  7. 利用Python迭代器查找最小值和最大值

    迭代器的用法为for...in.... 迭代器如同for循环,可以遍历所有的值,但我们熟悉的的语言,都是通过下标完成的,python的循环程度要高于C语言的循环,因为python的迭代不止可以用在Li ...

  8. android 7.0 pm install 失败问题

    这两天,把app内置成系统文件或者系统签名取得系统权限,发现使用pm install path在低版本上可行,在高版本就安装失败 抛出 NullPointException,查看了一下源码,发现对包名 ...

  9. Linux 下的 redis安装

    官网下载链接:https://redis.io/download redis安装流程,记录自己的实践,分享给需要的人. 1.选择Stable(5.0)下的Download 5.0.0 链接进行下载 ( ...

  10. NOIP模(ka)拟(chang)测试30 考试报告

    应得分:300 实得分:210 毒瘤卡常出题人,卡掉90分! T1 Return 开个副本数组sort一下,unique去重就可以啦.时间复杂度$ O(nlog2(n)) $ T2 One 其实就是约 ...