vue实现下拉加载其实没那么复杂


Posted in Javascript onAugust 13, 2019

前言

之前缺乏移动端的经验。一直不知道上拉加载,下拉刷新是怎么实现的。现在正好有个产品有这样一个需求。想了一会没有思路。就去找插件。啥vue-infinite-scroll,vue-virtual-scroll-list。啊呀,牛!无限滚动,十万条数据渲染。

经过我一大圈的折腾。还是默默的卸载了插件。我只是需要实现一个下拉加载,不需要其他这么多的功能。看了看其他人的源码,直接撸了起来,实现一个List组件。

效果展示

vue实现下拉加载其实没那么复杂

MList.vue

<template>
 <div class="list-wrap">
  <div class="content" ref="list" @scroll="onScroll">
   <slot></slot>
  </div>
  <div class="loading" v-show="loading">正在加载数据......</div>
 </div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
 components: {}
})
export default class extends Vue {
 @Prop()
 private loading!: boolean;
 private onScroll() {
  const obj: any = this.$refs.list;
  // clientHeight 视口高度 scrollTop 滚动条离顶部的高度 scrollHeight 列表内容的高度
  if (obj.clientHeight + obj.scrollTop === obj.scrollHeight) {
   this.$emit("toBottom");
  }
 }
}
</script>
<style scoped lang="scss">
.list-wrap {
 width: 100%;
 height: 100%;
 position: relative;
 .content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
 }
 .loading {
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: 20px;
  color: #ffffff;
 }
}
::-webkit-scrollbar { // 去除滚动条边框
 width: 0 !important;
}
::-webkit-scrollbar {
 width: 0 !important;
 height: 0;
}
</style>

使用组件

<div class="body">
   <m-list @toBottom="fetchNewData()" :loading="loading">
    <code-info class="item" v-for="(item,index) in dataList" :key="index"></code-info>
   </m-list>
</div>

 private dataList: any[] = [1, 2, 3, 4, 5, 6, 7, 8];
 private loading: boolean = false;
 private fetchNewData() {
  this.loading = true;
  setTimeout(() => {
   this.dataList.push(1, 2, 3);
   const ref: any = this.$refs.vueLoad;
   this.loading = false;
  }, 1000);
 }

这里需要注意的是m-list的父容器一定要固定高度,本例为body。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
学习javascript文件加载优化
Feb 19 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
vue中created和mounted的区别浅析
Aug 13 #Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 #Javascript
微信小程序使用npm包的方法步骤
Aug 13 #Javascript
Vue中的transition封装组件的实现方法
Aug 13 #Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 #Javascript
详解json串反转义(消除反斜杠)
Aug 12 #Javascript
json 带斜杠时如何解析的实现
Aug 12 #Javascript
You might like
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
node内置调试方法总结
2018/02/22 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python脚本监控docker容器
2016/04/27 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python中web框架的自定义创建
2019/09/08 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
校领导推荐信
2013/11/01 职场文书
客服文员岗位职责
2013/11/29 职场文书
老师对学生的评语
2014/04/18 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
社会实践的活动方案
2014/08/22 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
云台山导游词
2015/02/03 职场文书
美丽人生观后感
2015/06/03 职场文书
思想工作总结范文
2015/08/12 职场文书
七年级数学教学反思
2016/02/17 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers