vue移动UI框架滑动加载数据的方法


Posted in Javascript onMarch 12, 2018

前言

在我们移动端还有一个很常用的组件,那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现下拉刷新功能)!!下面我们就一起来实现这个组件。

效果展示

先上一个gif图片展示我们做成后的效果,如下:

vue移动UI框架滑动加载数据的方法

DOM结构

页面应该包含三个部分:1. 正文区域 2.加载小菊花以及记载文字 3.所有数据加载完成后的文字:

<div ref="scroll" class="r-scroll">
 <div class="r-scroll-wrap">
  <slot></slot>
 </div>
 <slot name="loading">
  <div v-show="isLoading" class="r-scroll-loading">
   <r-loading></r-loading>
   <span class="r-scroll-loading-text">{{loadingText}}</span>
  </div>
 </slot>
 <slot name="complate">
  <div v-show="isComplate" class="r-scroll-loading">{{complateText}}</div>
 </slot>
</div>

css样式

整个组件的容器r-scroll应该是固定宽度,超出部分可以滚动的;正文区域应该是随着内容,高度自动增长的;加载小菊花在滚动距离底部默认数值的时候显示;所有数据加载完成后显示数据加载完成文字:

<style lang="scss">
@mixin one-screen {
 position: absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow: hidden;
}
@mixin overflow-scroll {
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
}

.r-scroll{
 @include one-screen;
 @include overflow-scroll;
 &-loading{
  text-align: center;
  padding-top: 3vw;
  padding-bottom: 3vw;
  font-size: 14px;
  color: #656565;
  line-height: 20px;
  &-text{
   display: inline-block;
   vertical-align: middle;
  }
 }
}
</style>

javascript

交互逻辑分析:

  1. 页面初始化的时候,获取整个组件节点以及正文容器节点
  2. 对整个容器节点进行绑定scroll事件
  3. 容器进行滚动的过程中判断是否距离顶部小于指定数值,如果小于则触发自定义事件loadmore
  4. 业务代码中监听loadmore事件,如果触发则加载数据

因为代码不复杂,故不详细解析,大家看下代码注释,如有不清楚的请在评论中发表评论:

<script>
import rLoading from '../loading'
export default{
 components: {rLoading},
 props: {
  // 距离底部数值,小于或等于该数值触发自定义事件loadmore
  bottomDistance: {
   type: [Number, String],
   default: 70
  },
  // 加载中的文字
  loadingText: {
   type: String,
   default: '加载中...'
  },
  // 数据加载完成的文字
  complateText: {
   type: String,
   default: '-- 我是个有底线的列表 --'
  }
 },
 data () {
  return {
   // 用来判定数据是否加载完成
   isComplate: false,
   // 用来判定是否正在加载数据
   isLoading: false,
   // 组件容器
   scroll: null,
   // 正文容器
   scrollWrap: null
  }
 },
 watch: {
  // 监听isLoading,如果isLoading的值为true则代表触发了loadmore事件
  isLoading (val) {
   if (val) {
    this.$emit('loadmore')
   }
  }
 },
 methods: {
  // 初始化组件,获取组件容器、正文容器节点,并给组件容器节点绑定滚动事件
  init () {
   this.scroll = this.$refs.scroll
   this.scrollWrap = this.scroll.childNodes[0]
   this.scroll.addEventListener('scroll', this.scrollEvent)
   this.$emit('init', this.scroll)
  },
  scrollEvent (e) {
   // 如果数据全部加载完成了,则再也不触发loadmore事件
   if (this.isComplate) return
   let scrollTop = this.scroll.scrollTop
   let scrollH = this.scroll.offsetHeight
   let scrollWrapH = this.scrollWrap.offsetHeight
   // 组件容器滚的距离 + 组件容器本身距离大于或者等于正文容器高度 - 指定数值 则触发loadmore事件
   if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) {
    this.isLoading = true
   }
  },
  // 当前数据加载完成后调用该函数
  loaded () {
   this.isLoading = false
  },
  // 所有数据加载完成后调用该函数
  compleate () {
   this.isLoading = false
   this.isComplate = true
   this.scroll.removeEventListener('scroll', this.scrollEvent)
  }
 },
 mounted () {
  this.$nextTick(this.init)
 }
}
</script>

另外该组件中引用到了loading小菊花组件,附录一个小菊花组件代码,因代码简单故不详细解析:

菊花使用的是一张gif图片,请照一张你喜欢的菊花gif放在该菊花组件的路径下

<template>
 <div class="r-loading-container">
  <img src="./loading.gif">
 </div>
</template>
<script>
export default {}
</script>
<style lang="scss">
.r-loading-container{
 display: inline-block;
 vertical-align: middle;
 img{
  width: 20px;
  height: 20px;
  display: block;
 }
}
</style>

写在最后

最后这里附录一个使用例子吧:

<template>
 <div class="index">
  <r-scroll ref="scroll" @loadmore="queryDate">
   <div class="item" v-for="(item, index) in list">{{item}}</div>
  </r-scroll>
 </div>
</template>

<script>
import rScroll from '../../components/scroll'
function timeout (ms) {
 return new Promise((resolve, reject) => {
  setTimeout(resolve, ms, 'done')
 })
}

export default{
 components: {rScroll},
 data () {
  return {
   i: 0,
   list: []
  }
 },
 methods: {
  async queryDate () {
   await timeout(1000)
   let i = this.i
   let data = []
   for (let j = 0; j < 40; j++) {
    data.push(i + j)
    this.i = this.i + 1
   }
   this.list = this.list.concat(data)
   // 调用组件中的loaded函数,如果数据加载完成后记得调用组件的compleate函数
   this.$refs.scroll.loaded()
  }
 },
 mounted () {
  this.queryDate()
 }
}
</script>

<style lang="scss">
.item{
 background-color: #f2f2f2;
 border-bottom: 1px solid #fff;
 height: 40px;
 line-height: 40px;
 text-align: center;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
Javascript window对象详解
Nov 12 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
vuex的module模块用法示例
Nov 12 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
详解vuex的简单使用
Mar 12 #Javascript
js提取中文拼音首字母的封装工具类
Mar 12 #Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 #Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 #Javascript
javascript变量提升和闭包理解
Mar 12 #Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 #Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 #Javascript
You might like
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
两个Javascript小tip资料
2010/11/23 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python入门篇之条件、循环
2014/10/17 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python之list对应元素求和的方法
2018/06/28 Python
浅谈Python中的bs4基础
2018/10/21 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
应用数学自荐书范文
2013/11/24 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
项目申请汇报材料
2014/08/16 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书