uniapp实现下拉刷新的几种方式小结
一.自带刷新
1.在pages.json 上进行定义
2.在页面上监听下拉动作进行需要的操作
ps：一定要手动停止刷新，否则会一直刷新
自带刷新的优点：相对稳定，写法相对简单
自带刷新的缺点：样式上固定的 所以不能满足全部人的需求
样式：
二.使用srcoll-view下拉刷新
组件代码：scroll-view: uniapp使用scorll-view实现下拉刷新
子组件内容：
定义数据：
页面加载初始化：
定义方法：
父组件内容
1. 引入组件
2.方法
使用srcoll-view刷新优点：刷新的样式可以自定义相对灵活
使用srcoll-view刷新缺点：srcoll-view相对不稳定偶尔会出现下拉不刷新的情况，scroll-view 不适合放长列表，有性能问题
三.使用mescroll-nui下拉刷新
组件官网：mescroll -- 精致的下拉刷新和上拉加载js框架
mescroll的uni版本, 是专门用在uni-app的下拉刷新和上拉加载的组件, 支持一套代码编译到iOS、Android、H5、小程序等多个平台，本身这个框架就是已经比较完善了的也是很实用，还是挺推荐使用的。
1.引入mescroll
使用HBuilderX导入插件，【wxs+renderjs实现】高性能的下拉刷新上拉加载组件 - DCloud 插件市场
2.页面上使用
页面标签
标签上参数说明：
- @init ：mescroll组件初始化完成的回调
- :down：下拉参数配置
- @down ：下拉刷新的回调
- :up：上拉参数配置
- :fixed ：是否通过fixed定位来固定mescroll-uni的高度
- ps：有其他需求的可以查看官网有更详细的参数配置说明
引入混入
3.基本参数
4.加载样式
（我使用的时候发现mescroll-nui样式的话只能使用文字，所以我在插件的基础上添加的一些页面样式）
通过判断刷新的状态在页面上添加了三个刷新的状态以及刷新中的加载动画
5.使用mescroll-nui的注意事项
down和up的配置项不是响应式的, 如果要动态修改配置, 需要通过 this.mescroll.optDown和this.mescroll.optUp 动态修改
总结
到此这篇关于uniapp实现下拉刷新的几种方式小结的文章就介绍到这了,更多相关uniapp下拉刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于如何利用原生js实现表单的正则验证，所有验证都通过后提交按钮才可用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
大家都知道Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。下面这篇文章主要给大家介绍了在JS中利用swiper实现3d翻转幻灯片的相关资料，文中给出了完整的示例代码供大家参考学习，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
这篇文章主要介绍了prototype.js简单实现ajax功能,结合实例形式分析了prototype.js前台实现ajax与后台struts的相关操作技巧,需要的朋友可以参考下2017-10-10
JavaScript检测浏览器cookie是否已经启动的方法
这篇文章主要介绍了JavaScript检测浏览器cookie是否已经启动的方法,实例分析了javascript操作cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
本篇文章主要介绍了template.js前端模板引擎使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了微信小程序使用video组件播放视频功能,结合实例形式分析了video组件播放本地mp4小视频的具体实现技巧,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
这篇文章主要给大家介绍了关于微信小程序通过一个json实现分享朋友圈图片的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章主要介绍了JS实现浏览器状态栏文字从右向左弹出效果,涉及JavaScript结合时间函数遍历字符串及动态改变状态栏显示效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
突发奇想比如点击菜单中的粘帖后事件如何捕获，如下图所示,用的jQuery中的paste事件，如想获得粘帖文本要使用setTimeout控制下时间，感兴趣的朋友可以参考下2013-04-04
这篇文章主要介绍了微信小程序使用form表单获取输入框数据的实例代码，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论