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 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
javascript中clone对象详解
Dec 03 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
js 作用域和变量详解
2017/02/16 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
材料物理专业大学毕业生求职信
2013/10/15 职场文书
治超工作实施方案
2014/05/04 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
关于环保的广播稿
2015/12/17 职场文书