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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
JavaScript监听键盘事件代码实现
Jun 03 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
关于php fread()使用技巧
2010/01/22 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
详解PHP PDO简单教程
2019/05/28 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
为数据添加append,remove功能
2006/10/03 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python paramiko模块的使用示例
2018/04/11 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
社区党员先进事迹
2014/01/22 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
办公室副主任职责范本
2014/03/08 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
医院搬迁方案
2014/06/14 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server
Python jiaba库的使用详解
2021/11/23 Python
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers