没有合适的资源?快使用搜索试试~ 我知道了~
前言 在我们移动端还有一个很常用的组件,那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现下拉刷新功能)!!下面我们就一起来实现这个组件。 效果展示 先上一个gif图片展示我们做成后的效果,如下: DOM结构 页面应该包含三个部分:1. 正文区域 2.加载小菊花以及记载文字 3.所有数据加载完成后的文字: <div ref=scroll class=r-scroll> <div class=r-scroll-wrap> <slot></slot> <
资源推荐
资源详情
资源评论
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;
资源评论
weixin_38606870
- 粉丝: 1
- 资源: 922
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- NOI 全国青少年信息学奥林匹克竞赛(官网)-2024.11.05.pdf
- 【Unity抢劫和犯罪题材的低多边形3D资源包】POLYGON Heist - Low Poly 3D Art
- 网络安全是一个广泛的领域,涉及的知识和技能非常多样.docx
- 用Python实现,PySide构建GUI界面的“井字棋”游戏 具备学习功能(源码)
- 系统测试报告模板 测试目的、测试依据、测试准备、测试内容、测试结果及分析、总结
- 雷柏2.4G无线鼠标键盘对码软件V3.1
- Python基础入门-待办事项列表.pdf
- 240301031刘炳炎咖啡网站导航.psd
- 数据集【YOLO目标检测】道路油污检测数据集 170 张,YOLO/VOC格式标注!
- 基于Robot FrameWork框架的自动化测试
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功