vue移动UI框架滑动加载数据的方法
时间:2019-04-13
本文章向大家介绍vue移动UI框架滑动加载数据的方法,主要包括vue移动UI框架滑动加载数据的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
在我们移动端还有一个很常用的组件,那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现下拉刷新功能)!!下面我们就一起来实现这个组件。
效果展示
先上一个gif图片展示我们做成后的效果,如下:
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
交互逻辑分析:
- 页面初始化的时候,获取整个组件节点以及正文容器节点
- 对整个容器节点进行绑定scroll事件
- 容器进行滚动的过程中判断是否距离顶部小于指定数值,如果小于则触发自定义事件loadmore
- 业务代码中监听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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 检测本地文件躲避安全分析
- 如何在Kerberos的Linux上安装及配置Impala的ODBC驱动
- 对抗静态分析——so文件的加密
- Bypass unsafe-inline mode CSP
- Joomla未授权创建用户漏洞(CVE-2016-8870)分析
- 如何将HDFS文件系统挂载到Linux本地文件系统
- 使用 XML 内部实体绕过 Chrome 和 IE 的 XSS 过滤器
- 响应式编程的实践
- S2-045 原理初步分析(CVE-2017-5638)
- 如何在HDFS上查看YARN历史作业运行日志
- 面向流的设计思想
- 天才第一步 Docker 纸尿裤
- 如何迁移Kudu1.2的WAL和Data目录
- WordPress REST API 内容注入漏洞分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 怎么优雅的使用 laravel 的 validator验证办法
- Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
- php设计模式之适配器模式原理、用法及注意事项详解
- php基于Redis消息队列实现的消息推送的办法
- tp5框架无刷新分页实现方法分析
- PHP与SQL语句写一句话木马总结
- golang实现php里的serialize()和unserialize()序列和反序列办法详解
- php和html的区别点详细总结
- 详解在YII2框架中使用UEditor编辑器发布文章
- 在Laravel的Model层做数据缓存的实现
- Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
- php连接mysql数据库最简单的实现方法
- 解决laravel id非自增 模型取回为0 的问题
- PHP7.0连接DB操作实例分析【基于mysqli】
- Laravel获取当前请求的控制器和方法以及中间件的例子