因为小程序的scroll-view组件不能下拉刷新我做了个开源项目

最新推荐文章于 2024-07-19 09:44:13 发布
最新推荐文章于 2024-07-19 09:44:13 发布
阅读量246 收藏
点赞数
分类专栏： 前端 文章标签： JavaScript 微信小程序
原文链接：https://www.mk2048.com/blog/blog.php?id=0icji2ai2j&title=%E5%9B%A0%E4%B8%BA%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84scroll-view%E7%BB%84%E4%BB%B6%E4%B8%8D%E8%83%BD%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E6%88%91%E5%81%9A%E4%BA%86%E4%B8%AA%E5%BC%80%E6%BA%90%E9%A1%
版权

小程序下拉刷新目前只能用page的onPullDownRefresh事件，但是正在做的产品中头部有fix的部分，如果用下拉刷新就只能监听page的scroll到顶的时候去掉fix，而且刷新会连头部一起拉下来显得比较蠢，为了只让列表部分下拉刷新，我做了个scroll-view的扩展组件，效果如下：

相关实现分享

就顺便做了一些别的优化，比如scroll-view的scrolltolower事件如果一直拉就一直触发的问题等 然后又顺便简单封装了一下image组件，增加了image的placeholder占位图以及加载失败的破图等

View on Github


更多专业前端知识，请上 【猿2048】www.mk2048.com
qq_36320160
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp(微信小程序) - 实现uniapp小程序电子签名板，横屏手写姓名签名专用写字画板，客户专用签字板，手写签名签字画板组件，手写签名，（详细运行示例，一键复制开箱即用）
高级前端工程师
05-05 6219
uniapp实现微信小程序的电子签名效果，uniapp微信小程序 电子签名 写字板，用uniapp实现微信小程序的电子签名，uniapp微信小程序canvans实现手写签名，记录一个uniapp写的小程序的手写板,横屏,用于签名，unniapp实现电子签名，uniapp怎么做横屏的手写签名，uniapp如何实现签字板，uniapp小程序平台下怎么做电子签名板组件，uniapp电子签名插件，uniapp最好用的电子写字板插件组件源码，实现uniapp 手写签名功能，手写板、签字板，uni-app插件市场最好的
解决Scrollview嵌套listview下拉刷新的一些问题
12-01
解决Scrollview嵌套listview下拉刷新的一些问题
微信小程序中scroll-view 自定义下拉刷新无法复位解决办法
最新发布
番茄Salad
07-19 392
微信小程序中scroll-view 自定义下拉刷新无法复位解决办法
微信小程序小程序使用scroll-view不能使用下拉刷新的解决办法
weixin_33781606的博客
03-22 1567
<scroll-view class="movie-grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="loadMoreMovie"> <block wx:for="{{movies}}" wx:key="{{item}}"> <view class...
小程序上拉下拉共存时不可使用scroll-view的解决方法
weixin_30675967的博客
03-26 72
使用bindscrolltolower，必须搭配使用的scroll-view会导致小程序"enablePullDownRefresh": true下拉不能使用。 解决方法，就是当两者同时存在时，改scroll-view为view，改bindscrolltolower为onReachBottom函数。 这样在上拉加载，跟下拉刷新同时存在的时候，"enablePull...
【小程序】支付宝小程序自定义下拉刷新组件
wusq的博客
04-21 1625
🌾用支付宝原生框架写一个下拉刷新组件。
小程序scroll-view 下拉刷新 和上拉触底
天天的博客
01-24 1479
结构 js 当我们下拉时，要重新获取数据，这个时候，当成功后，要关闭下拉刷新 getVideoList:function(vid){ wx.showLoading({ title: '正在加载', }); this.setData({ vList:"" }) // 获取当前vid 下的视频列表 wx.request({ url: 'http://localhost:3000/video/group?id='+vid, ...
微信小程序scroll-view实现下拉刷新
逆袭的菜鸟X
05-13 1642
1、使用方法 <super-scroll-view class="phone-body" bind:lower="onReachBottom" bind:pulldown="onPullDownRefresh" refreshertriggered="{{refreshertriggered}}"> // 这里是滚动内容 </super-scroll-view> 2、源码 super-srcoll-view.wxml <scroll-view clas
小程序scroll-view自身下拉刷新的实现分享
03-29
前几天分享了一个自己做的关于小程序组件扩展的开源项目（传送门）  本来就是想给自己发布的第一个开源代码骗骗star，结果有不少善良的朋友给文章点赞了，搞得我有点不好意思，所以决定写点干货讲讲具体是怎么实现...
通过开源项目来实现可以下拉刷新的GridView
10-14
以上就是使用开源项目SwipeRefreshLayout实现一个具有下拉刷新功能的GridView的基本步骤。通过这种方式，我们可以轻松地在GridView上添加这一常见且实用的功能，提升用户体验。在实际开发中，还可以根据需求进行...
mall-xiaohongshu-小程序模仿小红书.zip
09-23
对于小程序这方面，完全还是新手，给跟我一样的新手的一个建议，除了看微信小程序开发文档之外，也可以多看一看开源的小程序项目源码，遇到问题，可以看看别人是怎么解决的。各个社区也是很好的平台，可以将问题发布...
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
08-31
主要介绍了微信小程序 scroll-view实现上拉加载与下拉刷新的实例的相关资料,需要的朋友可以参考下
微信小程序页面无限滚动流
听风看海的博客
04-29 5561
场景 当前的小程序非常火，开发起来也很快，框架很多，今天讲下mpvue这个框架实现页面无限滚动流，滚动到底加载新数据。 问题 微信小程序不支持Dom, 那么要实现一个无限的滚动效果那不是蛋疼？ mpvue+scroll-view实现 mpvue这个是美团开源的一个框架， 语法是和vue99%相似，但是坑很多，如果你遇到可以看下我的mpvue的其他文章，里面详细的讲了哪些坑以及解决办法。 scrol...
小程序实现下拉刷新
weixin_59525879的博客
09-09 1411
事件，当用户下拉页面后，该事件会被触发。在事件处理函数中，调用相应的数据刷新方法，例如重新请求数据，在数据请求成功后调用。方法，停止当前页面的下拉刷新状态。事件的使用，就可以在小程序中实现下拉刷新功能了。小程序实现下拉刷新可以通过使用组件。，表示允许竖向滚动。组件包裹需要滚动的内容，设置。在需要下拉刷新的页面的。
uni-app微信小程序scroll-view自定义下拉刷新
热门推荐
僵小蛋的博客
04-29 2万+
如果你需要自定义下拉刷新，那么使用page级别的下拉刷新是无法定制样式的，微信提供了scroll-view来支持用户自定义下拉刷新，先看文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 用uni-app开发，可以封装成vue组件，比较方便： <template> <!...
支付宝小程序（微信小程序同理）页面下拉刷新简单实现
weixin_42376402的博客
09-02 1246
支付宝小程序、微信小程序同理页面下拉刷新简单实现
uni-app scroll-view组件实现下拉刷新
09-23
在uni-app中，可以使用scroll-view组件来实现下拉刷新功能。为了实现下拉刷新，你可以遵循以下步骤： 1. 将scroll-view组件放置在需要下拉刷新功能的页面中。 2. 设置scroll-view的scroll-y属性为true，以启用垂直滚动。 3. 使用scroll-view的bindscrolltoupper事件来监听滚动到顶部的事件。 4. 在事件处理函数中，执行下拉刷新的逻辑，例如发送网络请求获取最新数据。 5. 在获取到数据后，更新页面的数据，并通过setData方法将更新后的数据传递给页面。 这样，当用户下拉scroll-view时，就会触发下拉刷新的功能，从而实现页面数据的更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值