微信小程序下拉刷新/上拉加载组件

简介

一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件，需要基础库2.10.1及以上，
项目地址：github

预览

功能

下拉刷新
上拉加载
支持自定义下拉样式
支持自定义上拉加载样式

使用示例

{"usingComponents": {"pull-refresh-view":"../components/pull-refresh-view/index"}
}

<pull-refresh-view class="list-container"bindonrefresh="onRefresh"refreshing="{{isRefreshing}}"bindloadmore="onLoadMore"nomore="{{isFinish}}"pullText="下拉可以刷新"loadmoreText="加载中..."><block wx:for="{{dataList}}" wx:key><view class="item"><text>{{item.name}}</text></view></block>
</pull-refresh-view>

属性配置

属性	默认	说明
refresherEnable	true	是否开启下拉刷新
refresherType	default	下拉刷新样式，可选：[‘default’，‘circle’，‘custom’]，custom表示用户自定义
pullText	下拉刷新	下拉过程的文案提示，refresherType为default时生效
releaseText	松开立即刷新	下拉达到刷新限定高度的文案提示，refresherType为default时生效
refreshText	正在刷新	刷新中的文案提示，refresherType为default时生效
loadType	default	上拉加载样式，可选：[‘default’，‘custom’]，custom表示用户自定义
loadmoreText	加载中	上拉加载的文案提示
nomoreText	没有更多数据	全部数据加载完毕的文案提示
pullDownHeight	60	下拉刷新的高度限制，单位px
refreshing	false	是否正在刷新，控制下拉刷新显示
nomore	false	是否全部加载完毕了
showLoading	true	是否显示上拉加载
scrollY	true	是否允许垂直滚动
scrollToView	无	值应为某子元素id（id不能以数字开头），滚动到该元素
scrollWithAnimation	false	在设置滚动位置时使用动画过渡

事件监听

bindonrefresh：下拉刷新监听
bindloadmore：上拉加载监听
bindonpulling：下拉过程监听
bindscrolltolower：滚动到底部
bindscrolltoupper：滚动到顶部
bindscroll：滚动监听

注意事项

需要给pull-refresh-view一个固定高度或百分比高度，通过 WXSS 设置 height，参考项目示例代码

微信小程序下拉刷新/上拉加载组件相关推荐

php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
微信小程序中使用echart、动态加载几条折线
一.示例 echart小程序示例 gitub地址:GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本在小程序中放入效果二. 小 ...
微信小程序双瀑布流布局+动态懒加载
效果图实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...
【微信技术-微信小程序】------- 渐进式骨架屏（加载流）（第二篇）
提示:看如下内容需要了解第一篇:简单入门(骨架屏(加载流) 简单入门(第一篇)) 目录一.什么是渐进式骨架屏? 二.实现渐进式骨架屏三.效果展示下载示例代码地址: 渐进式骨架屏示例代码-下载一 ...
【微信小程序】image真机无法加载网络图片
背景由于最近路边的停车位都被无情的创收铲掉了!今天把车停在了路边,可能是挡住了行人的路,被贴了个条,还留了个纸条--没有你的随车电话,我只能点电话举报你了.气的我牙痒痒! 只能回来自己撸一个挪车电话 ...
微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据
效果图小程序云开发分页加载代码  <view class="pageTitle">家 ...
微信小程序实现FBX模型的动画加载
鉴于有CSDN友问我FBX模型在小程序端加载的问题,我就在这里给大家介绍一下吧~ 首先,加载fbx模型,我们用到的是three.js和不同的模型类型的加载库,那么,我们在得到了web版本的加载库的前提 ...
微信小程序图片处理方案，解决加载缓慢，影响用户体验
1.改变图片尺寸:对于上传的图片,在后台对图片进行可接受范围内的最大限度压缩,图片宽高不用太大,大概预留你图片容器的1.5倍就行了,除非你做图片放大镜功能,否则小程序上加载2倍图意义不大,清晰度体验也 ...
微信小程序实现图片或gif预加载
微信官方原文链接链接: 官方解释. 最后实现代码 wx.getImageInfo({src: 'gif动画地址',success (res) {console.log(res)} }) 但是你用过之 ...

微信小程序下拉刷新/上拉加载组件

简介

预览

功能

使用示例

属性配置

事件监听

注意事项

微信小程序下拉刷新/上拉加载组件相关推荐

最新文章

热门文章