vue 使用鼠标滚动加载数据的例子


Posted in Javascript onOctober 31, 2019

关于用鼠标滚动到某个位置我们就去加载数据,这样的场景与业务需求现在越来越常见,现在来分析下《vue.js 实战》中作者的一个解决策略:

1. 设置一个标志位用来判断数据是否在加载中

2. 将滚动区域设置成 overfow:auto(显示滚动条)

3. 给滚动区域加入监听事件并绑定ref属性 来获取DOM实例

4. 当鼠标滚动到底部时,加载数据

4.1 如果此时 标志位为true则 直接退出,不进行此时数据加载

关键代码如下:

<template>
  //...代码省略
//该div 为要滚动区域
<div class="daily-list" ref="list" @scroll="handleScroll">
  // ...
</div>
</template>
<script>
 export default{
   data(){
    return {
      recommendList:[], //存放滚动区域要显示的数据
      isLoading:false //默认没有在加载数据
    }
  },
  methods:{
    //获取数据
    getRecommendList(){
        //表示正在加载数据
      this.isLoading=true;
      $.ajax.get('news/before/'+preDay).then(res=>{
        this.recommendList.push(res);
        //数据请求完成
        this.isLoading=false;
      })
    },
    handleScroll(){
      const $list=this.$refs.list;
        //如果数据有在加载中则这次请求退出
      if(this.isLoading) return; 
      //已经滚动的距离加页面的高度等于整个内容区高度时,视为接触到底部 
      //scrollTop 获取到顶部的滚动距离
      // clientHeight 表示页面视口高度
      // scrollHeight 页面内容的高度 
     if($list.scrollTop+document.body.clientHeight>=$list.scrollHeight){
   this.getRecommendList();
   }
    }
  },
  mounted(){
    this.getRecommendList()
  }
}
</script>
<style>
  width: 300px;
  position: fixed;
  top:0;
  left: 150px;
  //出现滚动条
  overflow: auto;
</style>

以上这篇vue 使用鼠标滚动加载数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 #Javascript
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 #Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 #Javascript
关于vue表单提交防双/多击的例子
Oct 31 #Javascript
Vuex的实战使用详解
Oct 31 #Javascript
如何在Vue中抽离接口配置文件
Oct 31 #Javascript
You might like
PHP define函数的使用说明
2008/08/27 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
php控制文件下载速度的方法
2015/03/24 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python实现针对中文排序的方法
2017/05/09 Python
Python探索之ModelForm代码详解
2017/10/26 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python实现多张图片拼接成大图
2019/01/15 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
Python之Sklearn使用入门教程
2021/02/19 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
应届大学生自荐信
2013/12/05 职场文书
捐书活动总结
2014/05/04 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
优秀团员事迹材料
2014/12/25 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
golang语言指针操作
2022/04/14 Golang
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis