列表滚动触发下拉刷新的实现

最新推荐文章于 2024-01-25 16:45:50 发布
最新推荐文章于 2024-01-25 16:45:50 发布
阅读量2k 收藏
点赞数 1
分类专栏： vue 文章标签： vue 懒加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38614249/article/details/78257584
版权

思路：首先需要一个触发事件，来触发加载更多这一事件，在触发的函数中，弹出一个加载的页面，并将向后台传输的page_size加5，然后判断加载数据的长度是否为0。如果为不为0，则给loadAll附一个值，利用三目运算符，判断加载的状态，渲染页面。

html：


js：


淡蓝色小怪兽
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue移动端实现下拉刷新
11-29
看完这篇文章，相信大伙也一样可以，做出一个自己的刷新，加载的组件 说这个功能之前，大家要先了解一下，要怎么触发滚动条事件。 一定要注意，所有滚动事件都必须要满足这个条件，横向滚动条也一样， 只要满足子元素宽度大于父元素宽度就可以了。（下篇文章会讲怎么实现一个横向滚动条） 接入正题！！！ 先来看看怎么剖析这个下拉刷新。 要用到的移动端的三个事件： touchstart(手指按下)，touchmove（手指移动），touchend（手指离开） 下拉刷新也就是（touchstart => touchmove(下移动) =>touchend）的一个过程 大体思路： 下拉主要与手指触摸y轴点有关 1.
基于vue的下拉刷新&滚动刷新指令
热门推荐
Kameleon
12-22 4万+
基于vue的下拉刷新&滚动刷新指令
uniapp启用弹框时候：禁止页面下拉刷新
最新发布
HQ584256的博客
01-25 587
show()是开启弹框，isPull 为 false，则调用 setStyle() 方法禁用当前 Webview 实例的下拉刷新功能。close(）是关闭弹窗，isPull 为 true，则调用 setStyle() 方法设置当前 Webview 实例支持下拉刷新。如果在H5上使用，则会导致报错，并且在取消弹框时候，也会取消不了则需要添加仅APP可使用。（// #ifdef APP-PLUS和// #endif）则是仅APP可使用。使用的是动态设置下拉刷新的功能解决的，在app上亲测可用，在H5上会报错。
vue中实现列表的懒加载（点击加载更多和滚动加载更多）
weixin_43489968的博客
09-23 2679
1.点击加载更多 <h3>列表的懒加载</h3> <div v-for="(item, index) in list" :key="index"> <div>{{item.id}}</div> </div> <div> <button v-if="moreShowBoolen" @click="moreShow">点击查询更多</button> <div
uniapp自定义弹框穿透触发scroll-view下拉刷新
qq_43033251的博客
03-30 900
修复自定义弹框穿透触发scroll-view下拉刷新bug 解决思路： 弹框出现的时候，禁止掉scroll-view的自定义下拉刷新 父组件---scroll-view HTML： <view class="tab-content"> <scroll-view class="scroll" :scroll-y='true' :refresher-enabled="refershEnable"
vant V2.12 下拉刷新和弹出框的坑
pusscat_xue的博客
03-22 794
先看问题，在下拉刷新中使用弹出框，会导致下拉弹出框的内容可触发下拉刷新，如下图所示 导致这个的原因就是因为弹出框挂载到了下拉刷新的div上，所以才会触发下拉刷新，弹出框最好挂载到body上，在vant的官网中弹出框(Dialog)有一个这样的属性 默认就是在body挂载，但不知道为何没有生效 ,只要在弹出框中设置get-container="body"这个属性就可以避免触发下拉刷新， 更多用法可参考官网:Vant 2 - Mobile UI Components built on Vu..
Vue 列表 懒加载 触底加载
不同场景下的水平居中
08-12 4996
Vue 列表懒加载 触底加载
原生js的触底加载
qq_36893984的博客
02-20 545
function getDocumentTop() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if (document.body) { bodyScrollTop = document.body.scrollTop; } if ...
vue el-table表格数据,不分页,鼠标滚动实现数据懒加载
Seven71111的博客
10-13 9218
当前有一个需求，页面不分页，又想在一页显示全部数据，这个时候其实就可以用数据懒加载。 随鼠标滚动到滚动条末尾，自动加载下一页的数据。 create的时候默认加载20条数据 这里差不多到末端了 鼠标滑到末端后，触发加载第二页数据 代码实现： 先定义个table (getPageBodyHeight 方法是我通过页面自适应监听页面宽高变化，之前帖子有栗子，计算table的高度，简单点的可以自己设置固定高度) <el-table border .
关于微信小程序列表懒加载的解决方案
KroNaiCulture的博客
12-05 1924
我们在渲染一个展示数组，不能一次性的把所有的元素都展示出来，这样可能会导致用户性能体验下降，因此我们需要把所有的元素先保存在一个容器里，等用户需要（上滑）的时候再拿出来显示，为了更加高效的开发，我封装了方法，为了让封装方法得到的数据能够持久化，我使用了微信小程序缓存技术来保存数据。 在写一个保存所有展示数据的方法： 再写一个拿到数据的方法： 使用如下： 这样就完成了一个列表的懒加载操作。
ajax上拉懒加载列表（适用于移动端）
12-04
近期项目Dome,常用ajax下拉懒加载列表。
html5手机列表页面滑动下拉刷新数据代码
11-03
html5手机列表页面滑动下拉刷新数据代码 html5手机列表页面滑动下拉刷新数据代码
下拉刷新列表
09-09
1准备图片 2建立shape_progress.xml用来控制下边两个布局的属性 3建立布局layout_footer_list.xml用来上拉显示更多 4建立layout_header_list.xml用来下拉显示刷新 5建立自定义布局类实现自定义布局的功能 6建立主布局 7在MianActivity中添加适配器(内部类) 8为自定义控件添加响应处理
微信小程序 列表的上拉加载和下拉刷新的实现
01-20
微信小程序可谓是9月21号之后最火的一个名词了，...那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧（通过聚合数据平台获取微信新闻）。 1.介绍几个组件 1.1 scroll-view 组件 注意：使用竖向滚动时
基于vue的下拉刷新指令和滚动刷新指令
11-30
不过根据用户的操作习惯来看，似乎滚动刷新更多数据和下拉刷新当前数据的操作方式，更符合用户对列表分页数据的读取习惯，因此，在这里小编想简单的说说，这次在小编系统中所使用的下拉刷新和滚动刷新的实现方式！...
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
11-28
这时候我们可以使用无限滚动和下拉刷新来实现控制显示的数量，当刷新到底部的边界的时候会触发无限滚动的事件，再次加载一定数量的条目。 还是拿在项目中的功能来举栗子介绍。 有个列表，几千条数据，做分页查询，...
Android RecyclerView实现下拉刷新和上拉加载更多
01-04
使用官方的刷新控件SwipeRefreshLayout来实现下拉刷新，当RecyclerView滑到底部实现下拉加载（进度条效果用RecyclerView加载一个布局实现） 需要完成控件的下拉监听和上拉监听，其中，下拉监听通过SwipRefreshLayout...
关于vue里页面的缓存
乐~的博客
03-07 4万+
keep-alive是vue内置的一个组件，可以使被它包含的组件处于保留状态，或避免被重新渲染。 用法: 运行结果描述： input输入框内，路由切换输入框内部的内容不会发生改变。 常见的用法：（下图是在https://www.cnblogs.com/sysuhanyf/p/7454530.html截的图，本篇文章为了自己方便查看。） 在keep-alive标签内部添加 inclu...
通过blob解析二进制的文件流，下载文件
乐~的博客
08-01 1万+
需求：表格转换，上传一个表格，解析后台返回的文件流，下载转换后的表格 html： <div class="edit_dialog"> <el-dialog title="表格转换" :visible.sync="execlChangeVisible" width="600px" :append-to-body="true" :close-on-click-mo...
uniapp下拉刷新实现
08-04
在UniApp中，下拉刷新的实现可以借助于uni-scroll-view组件和下拉刷新事件来完成。 首先，在需要实现下拉刷新的页面的.vue文件中，引入uni-scroll-view组件，并在页面的布局中添加一个uni-scroll-view标签，设置其scroll-y属性为true，表示允许垂直方向的滚动。 ```html <uni-scroll-view class="scrollview" scroll-y="true"> <!-- 在这里放置页面的内容 --> </uni-scroll-view> ``` 接下来，在页面的script标签中，对下拉刷新事件进行监听，并在触发后执行相应的刷新操作。可以通过设置onPullDownRefresh属性来监听下拉刷新动作。 ```javascript export default { methods: { onPullDownRefresh() { // 执行刷新操作 // 可以在这里发送请求，获取最新的数据 // 刷新完成后，调用uni.stopPullDownRefresh()结束刷新动作 this.getData(); }, getData() { // 发送请求，获取最新的数据 // 请求结束后，更新页面数据 // 刷新完成后，调用uni.stopPullDownRefresh()结束刷新动作 uni.stopPullDownRefresh(); } } } ``` 在onPullDownRefresh回调函数中，可以调用相应的接口请求最新数据，并在请求结束后更新页面数据，最后使用uni.stopPullDownRefresh()方法结束下拉刷新动作。 需要注意的是，下拉刷新的效果是由uni-app底层自动实现的，我们只需要提供相应的监听函数和刷新逻辑即可。在实际使用过程中，我们还可以通过设置refresh-trigger属性，允许通过组件外部的手动方法来触发刷新动作，以满足各类需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值