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 相关文章推荐
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
ant design charts 获取后端接口数据展示
May 25 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 文件系统详解
2012/09/13 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
初始Nodejs
2014/11/08 NodeJs
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
vue el-table实现自定义表头
2019/12/11 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
python图像处理之镜像实现方法
2015/05/30 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python gevent协程切换实现详解
2020/09/14 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
python中xlutils库用法浅析
2020/12/29 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
难忘的一天教学反思
2014/04/30 职场文书
政府四风问题整改措施
2014/10/04 职场文书
五年级学生期末评语
2014/12/26 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers