微信小程序下拉刷新功能--onPullDownRefresh
提到微信小程序的下拉刷新,我们可能首先会想到<scroll-view>中的下拉刷新事件,显而易见这样只满足在<scroll-view>组件。先在我们来看一下onPullDownRefresh下拉刷新功能。详解请见uni-app官网。
onPullDownRefresh
在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
- 需要在
pages.json
里,找到的当前页面的pages节点,并在style
选项中开启enablePullDownRefresh
。- 当处理完数据刷新后,
uni.stopPullDownRefresh
可以停止当前页面的下拉刷新。
uni.startPullDownRefresh(OBJECT)
开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
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() {return {text: 'uni-app'}},onLoad: function (options) {setTimeout(function () {console.log('start pulldown');}, 1000);uni.startPullDownRefresh();},onPullDownRefresh() {console.log('refresh');setTimeout(function () {uni.stopPullDownRefresh();}, 1000);}
}
我再开发中的使用:
onLoad() {this.goodsList = [];const page = {curPage: 1,pageSize: 10}this.page = page;uni.startPullDownRefresh();this.getGoodsList(page);this.getSwiper();
},
// 下拉刷新
onPullDownRefresh() {this.goodsList = [];const page = {curPage: 1,pageSize: 10}this.page = page;this.getGoodsList(page);setTimeout(function () {uni.stopPullDownRefresh();}, 1500);
},
微信小程序下拉刷新功能--onPullDownRefresh相关推荐
- 微信小程序下拉刷新列表onPullDownRefresh;微信小程序上划加载列表onReachBottom;uni-app微信小程序下拉加载数据;uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...
- 微信小程序——下拉刷新事件(onPullDownRefresh)
.js文件 // 下拉刷新onPullDownRefresh: function () {console.log('下拉刷新事件')},// 在onShow里面加载/*** 生命周期函数--监听页面显 ...
- html下拉刷新原理,微信小程序 下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
- 微信小程序--下拉刷新
实现微信小程序下拉刷新 步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
- 微信小程序下拉刷新问题
微信小程序下拉刷新问题 我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
- 下拉多选框 微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
- 微信小程序下拉不触发onPullDownRefresh
微信小程序下拉onpulldownrefresh不触发 简单记录下微信小程序下拉不触发方法的问题 1.下拉出发需要在app.json中配置下拉的内容 "window": {&quo ...
- ios微信小程序下拉刷新怎么配_[wx]微信小程序自定义下拉刷新
需求: 在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面操作与交互性: 实现方法: 1.小程序提供的下拉刷新(无法自定义刷新动画) 在页面设置内开启下拉(单独页面设置): { ...
- 微信小程序下拉刷新和上拉加载
效果图 微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的 个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下 其实 ...
- 微信小程序下拉刷新和上拉加载的实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新 下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...
最新文章
- A里正在拆中台,你还在建中台吗?
- 数据结构之希尔排序图文详解及代码(C++实现)
- Mac 使用 docker 搭建 kafka 集群 + Zookeeper + kafka-manager
- 符合skyline的3dml网络发布服务
- mysql多表联合查询事例_MySQL——多表查询详细介绍以及实例
- 最新!2020录取分数百强大学榜发布:清华文科第一,北大理科第一!
- oracle 无法套取,mycat-oracle报java.sql.SQLException: 无法从套接字读取更多的数据
- 无人驾驶 ai算法_质疑AI是否具有意图以及这对无人驾驶汽车意味着什么
- 为了机器学习把MacBook Pro换成Asus TUF Gaming 全家桶
- Android 视频压缩
- 【Flink 监控系列】Flink 自定义 kafka metrics reporter 上报 metrics 到 kafka
- 哈工大慕课 学生成绩管理系统V1.0~5.0
- Latex带序号的项目符号列表
- 罗杨美慧 20190919-2 功能测试
- DR和DIS的区别?
- 一行代码解决IE浏览器的兼容问题
- 美国大学生足球联赛数据集football——node2vec
- mysql索引命中查看_MySQL索引无法命中的几种情况及索引验证方法
- 【leetcode/二分】有效的完全平方数(夹逼二分)
- [创业故事]清风明月我 与谁同坐--我的创业故事-2