-
2022-05-06 15:20:47
pages.json
{ "path":"pages/list/list", "style":{ "enablePullDownRefresh": true } }
在需要下拉刷新的页面,通过onPullDownRefresh可以监听到下拉刷新的动作
<template> <view> <view>这是列表页</view> <view class="box-item" v-for="item in list" :key="item"> {{item}} </view> </view> </template> <script> export default { data () { return { arr: ["JavaScript","Css"] } }, onPullDownRefresh () { console.log('触发下拉刷新了') // 停止当前页面下拉刷新 uni.stopPullDownRefresh() } } </script>
更多相关内容 -
微信小程序下拉刷新上拉加载组件
2021-01-27 10:04:53基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画,有灵感的朋友可以丰富更多下拉动画 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱:. 只要... -
微信小程序 下拉刷新,tab切换 (源码)
2022-05-31 18:37:02微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab... -
微信小程序下拉刷新界面的实现
2020-08-29 06:39:53主要介绍了微信小程序下拉刷新界面的实现的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下 -
微信小程序下拉刷新,上拉加载及下拉列表制作
2021-03-29 20:00:46小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是... -
微信小程序下拉刷新
2022-01-19 16:57:08一、如何设置微信小程序所有页面都可以下拉刷新呢? 1、在app.json的"window"中进行配置 (1)把"backgroundTextStyle":“light"改为"backgroundTextStyle”:“dark” (2)添加"enablePullDownRefresh":true,开启...一、如何设置微信小程序所有页面都可以下拉刷新呢?
1、在app.json的"window"中进行配置
(1)把"backgroundTextStyle":“light"改为"backgroundTextStyle”:“dark”
(2)添加"enablePullDownRefresh":true,开启下拉刷新。2、在app.js中增加两个生命周期函数
onPullDownRefresh:function(){ this.onRefresh(); }, onRefresh:function(){ //导航条加载动画 wx.showNavigationBarLoading(); setTimeout(function () { wx.hideNavigationBarLoading(); //停止下拉刷新 wx.stopPullDownRefresh(); }, 2000); },
二、如何设置微信小程序单独页面下拉刷新呢?
1、首先在页面的json文件中添加设置:
“enablePullDownRefresh”: true
也就是写成下面这样子:{ "usingComponents": {}, "enablePullDownRefresh": true }
2、在js文件中写一个onRefresh()生命周期:
onRefresh:function(){ //导航条加载动画 wx.showNavigationBarLoading() //loading 提示框 wx.showLoading({ title: 'Loading...', }) console.log("下拉刷新啦"); setTimeout(function () { wx.hideLoading(); wx.hideNavigationBarLoading(); //停止下拉刷新 wx.stopPullDownRefresh(); }, 2000) },
2、在onPullDownRefresh()中调用上面写的函数:
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh:function(){ this.onRefresh(); },
效果:
这样就可以啦,自己设置刷新时间哦。有疑问请在下方留言。
-
微信小程序 下拉刷新
2022-02-15 11:36:02* 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { console.log(1111); //在当前页面显示导航条加载动画 wx.showNavigationBarLoading(); //显示 loading 提示框。需主动调用 ...
代码片段:/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { console.log(1111); //在当前页面显示导航条加载动画 wx.showNavigationBarLoading(); //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 wx.showLoading({ title: '刷新中...', }) //隐藏loading 提示框 setTimeout(function () { wx.hideLoading() }, 500) //隐藏导航条加载动画 wx.hideNavigationBarLoading(); //停止下拉刷新 wx.stopPullDownRefresh(); this.riliList(this.data.year,this.data.month) },
-
微信小程序 下拉刷新及上拉加载原理解析
2021-01-19 21:18:02这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景。 概念: 下拉刷新是... -
微信小程序实现下拉刷新动画
2020-10-16 19:21:20主要为大家详细介绍了微信小程序动画实现下拉刷新动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
微信小程序下拉刷新PullDownRefresh的使用方法
2020-10-17 16:57:55主要给大家介绍了关于微信小程序下拉刷新PullDownRefresh的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
微信小程序实现列表下拉刷新上拉加载
2020-11-26 16:58:32本文实例为大家分享了微信小程序实现列表下拉刷新上拉加载的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载... -
微信小程序下拉刷新功能--onPullDownRefresh
2022-07-15 15:49:19微信小程序下拉刷新功能--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); },
- 需要在
-
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
2019-11-19 19:41:52微信小程序scroll-view下拉刷新(附带下拉刷新效果) 使用说明 https://blog.csdn.net/u012308481/article/details/102619511 -
微信小程序 下拉刷新 上拉触底分页
2022-07-02 13:54:05下拉刷新1、在需要下拉刷新页面的json配置页,设置"enablePullDownRefresh":true,默认为false2、在* 页面相关事件处理函数--监听用户下拉动作 * onPullDownRefresh() 中添加要刷新的内容。上拉触底1、在*页面上拉... -
微信小程序下拉刷新不回弹
2021-09-13 16:47:43在真机调试微信小程序的时候,微信小程序下拉刷新结束,但是导航栏却并没有回到原位=。= 解决方法: 在下拉加载结束之后,调用wx.stopPullDownRefresh()方法就好了 wx.stopPullDownRefresh(); -
微信小程序下拉刷新组件
2021-01-27 10:09:31是当微信小程序的下拉刷新功能不符合场景、或者不适用时候的替代方案。提供了类似手机端chrome浏览器的下拉刷新效果(当然没有那么酷炫)。 支持场景 scroll-view swiper中嵌套使用scroll-view 使用了自定义顶导... -
微信小程序列表下拉刷新加载更多
2018-05-04 11:42:19微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多 -
微信小程序下拉刷新&上拉加载
2021-05-13 20:32:38下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法onPullDownRefresh() 上拉加载触底onReachBottom() 也可以scroll-view进行布局,这个就要个人喜好,比如滚动条滚动、触底、触顶... -
微信小程序下拉刷新功能
2020-08-11 17:45:12index.wxml <view style=" height: 700rpx;background:#fce2ad; "></view> <button class='btn1' bindtap=...下拉刷新功能</button> index.js const app = getApp() Page({ data:... -
微信小程序下拉刷新上拉加载
2020-09-11 17:59:552.下拉刷新 3.上拉加载 -
微信小程序下拉刷新/上拉加载更多
2021-01-19 10:47:43下拉刷新 下拉刷新并不是默认开启的需要在json文件中加"enablePullDownRefresh": true来开启下拉刷新。 在js文件中添加监听下拉函数onPullDownRefresh: function () {} 在函数中添加要执行的动作,上代码 // 页面... -
微信小程序下拉刷新上拉加载的两种实现方法
2020-12-22 07:40:21微信小程序下拉刷新上拉加载的两种实现方法,1、利用"onPullDownRefresh"和"onReachBottom"方法实现小程序下拉刷新上拉加载,2、在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上... -
微信小程序下拉刷新的背景颜色怎么改变
2021-04-09 09:14:35超多技术面试题等你来发现 下拉的页面的背景颜色在对应的json文件里面写上它 就可以了 "backgroundColor": "#F5F7F9 -
微信小程序UI 上拉加载 下拉刷新的实现.rar
2019-07-10 19:11:41微信小程序UI设计实例,今天分享给大家的是上拉加载 下拉刷新,这个功能在微信中还是比较常见的,大家也习惯了操作时候下拉屏幕刷新内容,上拉则加载更多内容,这个功能在Android智能机上已经得到了很好的应用,这个... -
微信小程序下拉刷新问题
2019-06-28 00:46:21微信小程序下拉刷新问题 我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享... -
微信小程序下拉刷新和触碰底部提示
2021-05-16 19:13:17下拉刷新和触碰底部提示 //在共用app.json上设置全局下拉 "window":{ "enablePullDownRefresh": true, "backgroundTextStyle":"dark", "navigationBarBackgroundColor": "#f00", "navigationBarTitleText": ...