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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
js控制table合并具体实现
Feb 20 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
vuex的简单使用教程
Feb 02 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 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求最大子序列和的算法实现
2011/06/24 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python生成验证码图片代码分享
2016/01/28 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Django 连接sql server数据库的方法
2018/06/30 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
电子专业推荐信范文
2013/11/18 职场文书
实习单位接收函
2014/01/11 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
Python sklearn分类决策树方法详解
2022/09/23 Python