uni-app 实现下拉刷新功能
我们在运用uni-app开发小程序或h5时,常常需要页面实现下拉刷新功能。
在 js 中定义 onPullDownRefresh
处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
步骤:
1、需要在pages.json
里,找到的当前页面的pages节点,并在 style 选项中开启enablePullDownRefresh
。
2、当处理完数据刷新后,uni.stopPullDownRefresh
可以停止当前页面的下拉刷新。
示例
pages.json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#0faeff",
"backgroundColor": "#fbf9fe"
}
}
index.vue
// 仅做示例,实际开发中延时根据需求来使用。
export default {
data: {
text: 'uni-app'
},
onShow: function (options) {
this.loadData();
},
onPullDownRefresh() {
this.loadData()
}
methods:{
loadData() {
this.$http('/data', {}, 'get').then((res) => {
//数据请求完成之后停止下拉刷新
uni.stopPullDownRefresh();
if (res.status) {
this.activityList = res.data
}
})
}
}
}
演示效果
uni-app 实现下拉刷新功能的更多相关文章
- Android StaggeredGrid 加下拉刷新功能 PullToRefresh
https://github.com/etsy/AndroidStaggeredGrid 用的github上面提供瀑布流,继承于abslistview,回收机制不错,并且提供了OnScrollLis ...
- 利用Swiperefreshlayout实现下拉刷新功能的技术探讨
在常见的APP中通常有着下拉页面从而达到刷新页面的功能,这种看似简单的功能有着花样繁多的实现方式.而利用Swiperefreshlayout实现下拉刷新功能则是其中比较简明扼要的一种. 一般来说,在竖 ...
- Xamarin. Android实现下拉刷新功能
PS:发现文章被其他网站或者博客抓取后发表为原创了,给图片加了个水印 下拉刷新功能在安卓和iOS中非常常见,一般实现这样的功能都是直接使用第三方的库,网上能找到很多这样的开源库.然而在Xamarin. ...
- [转]Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能
版权声明:本文出自郭霖的博客,转载必须注明出处. 转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最近项目中需要用到L ...
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能 (转)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最 近项目中需要用到ListView下拉刷新的功能,一开始想图省事,在 ...
- android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)
Android实现上拉加载更多功能以及下拉刷新功能, 采用了目前比较火的PullToRefresh,他是目前实现比较好的下拉刷新的类库. 目前他支持的控件有:ListView, ExpandableL ...
- 原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
- Android 高仿微信(QQ)滑动弹出编辑、删除菜单效果,增加下拉刷新功能
不可否认,微信.QQ列表的滑动删除.编辑功能着实很经典(从IOS那边模仿过来的),然.Android这边,对列表的操作,其实大多还停留上下文菜单来实现. Android如何实现list item的滑动 ...
- 解决:mui 的 选项卡 + 下拉刷新 功能,在其中嵌入 iframe 后,在 iphone 的情况下,iframe 的内容不能滚动,只显示第一屏内容。
我所遇到的情况是,使用 mui 的 选项卡 + 下拉刷新 功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后 在其中嵌入 iframe 后,在 iphon ...
- ListView实现下拉刷新功能
很久没有写博客了,感觉都懒惰了,今天说一下一个自定义的空间,就是ListView下拉列表可以刷新的功能,相信很多同学都看到过这种功能,最典型的就是新浪微博的下拉刷新列表了. 废话不多说,首先呢,下拉刷 ...
随机推荐
- 火山引擎数智平台拆解 APP改版场景中蕴含的数据思维
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 你有没有遇到过,打开一款经常使用的 APP,它却跳出一条需要你升级版本的提示? 大多数情况下,用户可能会直接点击「 ...
- SD 信用模拟检查增强
一.业务流程中需要进行信用模拟检查,但逻辑梳理较为复杂,因此借用交货单创建时信用检查逻辑.但是当交货单信用检查通过时,不创建交货单,因此需要对BAPI:BAPI_OUTB_DELIVERY_CREAT ...
- C++岗位面试真题宝典 -- 操作系统篇
2.1 Linux中查看进程运行状态的指令.查看内存使用情况的指令.tar解压文件的参数. 参考回答 查看进程运行状态的指令:ps命令."ps -aux | grep PID",用 ...
- S3C2440移植uboot之支持NORFLASH
上节S3C2440移植uboot之支持NAND启动修改了代码支持了NAND启动.这节我们分析uboo使其支持NORFLASH的操作. 目录 1.分析启动错误 2.修改代码 3.在匹配数组中添加我们 ...
- mock使用
- 微信小程序图片展示类型
- xshell配置隧道转移规则
钢铁知识库,一个学习python爬虫.数据分析的知识库.人生苦短,快用python. xshell是什么 通俗点说就是一款强大ssh远程软件,可以方便运维人员对服务器进行管理操作,功能很多朋友们自行探 ...
- ElasticSearch使用实践(文档操作)
可以使用Docker安装ES和Kibana: 使用docker-compose安装ElasticSearch和Kibana: version: '3.1' services: elasticsearc ...
- springboot升级到2.6.x和2.7.x 兼容hystrix
一.pom.xml需要引入的依赖 二.项目开启熔断器开关 2.1 注解方式 2.2 xml方式 三.依赖类缺失问题 四.版本匹配安全检查问题 五.测试验证 六.结论 一.pom.xml需要引入的依赖 ...
- 问题--如何快速复制Typora(Markdown)中的代码块/区块等
使用快捷键ctrl+E,选中相同格式的文字,然后快速复制即可