小程序下拉刷新，3分钟读懂

最新推荐文章于 2023-10-23 09:58:45 发布
最新推荐文章于 2023-10-23 09:58:45 发布
阅读量270 收藏
点赞数
分类专栏： 微信小程序 文章标签： 小程序 微信小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andrewvw/article/details/121987201
版权
本文介绍了微信小程序中实现下拉刷新的步骤，包括在app.json或页面json配置，使用内置的onPullDownRefresh函数，并在该函数内完成刷新逻辑，以及设置刷新状态的隐藏时间。
摘要由CSDN通过智能技术生成

小程序下拉刷新
在这里插入图片描述
1.在app.json或者想要页面的json文件中 设置

"enablePullDownRefresh":true  //设置允许下拉刷新

2.在js文件中找到onPullDownRefresh:function(){}函数
注意这是小程序自带的函数，不需要自己写
在这里插入图片描述
3.在这个函数中写，

wx.showNavigationBarLoading();//导航栏的圈圈

最低0.47元/天 解锁文章
小白白21
关注
专栏目录
让你快速读懂微信小程序初始化数据
weixin_43446193的博客
04-10 2964
微信小程序中基本知识 每个页面文件夹里，都有一个页面对应的js文件； 这个文件里的Page()函数用来注册页面； 接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等页面的所有业务逻辑处理都放在这个文件里。 object参数说明： 属性 描述 data 页面的初始数据 onLoad 监听页面加载 onReady 监听页面初次渲染完成 onSh...
微信小程序（JSON配置文件）
weixin_45626166的博客
11-13 1933
新建页面 新建页面page （1）手动创建 ①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录” ②右键单击新建的目录，在弹出的菜单中选择“新建Page” （2）自动创建 直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件 删除页面pa...
微信小程序 下拉刷新
u013611033的博客
06-05 323
由于页面配置原因，不想开启小程序自带的下拉刷新，自己重新写了一个 <view class="home" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove" > <view v-if="showRefresh" style="width: 100%; position: relative; padding: 60rpx 0;"
小程序上拉加载下拉刷新
MoMo@blog
08-02 132
<view class="container"> <view wx:if="{{isUpper}}" class="lower-con">数据已更新</view> <!-- 问题展示开始 --> <block wx:for="{{lists}}" wx:key="idx"> </blo...
小程序下拉刷新怎么实现？
前端视听
09-09 1924
在小程序里面加上一个下拉刷新的原因是为了优化用户的体验，有时候会遇到这样的一种情况，用户的网络比较慢，那么该出现的内容就出现的很慢，如果有下拉刷新的功能，就会给人一种需要等待一下下一秒就会出现内容的感觉，而不是空白页或者这个小程序有bug之类的疑问。 参考API：下拉刷新 其实很简单，打开app.json文件,在window里面添上这句即可。 "enablePullDownRefresh": true, { "pages": [ "pages/index/index", "page
【微信小程序开发】小程序开启下拉刷新功能
Elephant_King的博客
04-25 375
的样式。
class07：下拉刷新和上拉触底、小程序的生命周期和成员权限
qq_51667621的博客
05-26 785
目录一、下拉刷新和上拉触底1.下拉刷新2.案例3.上拉触底4.实例5.改进二、小程序的生命周期1.生命周期2.onLoad、onShow、onReady、onHide的执行时间点3.onUnload ：生命周期回调—监听页面卸载三、分配小程序权限 一、下拉刷新和上拉触底 1.下拉刷新 json文件中enablePullDownRefresh：属性，设置为true。 //home.json { "usingComponents": {}, "enablePullDownRefresh": true,
微信小程序 JSON配置文件
weixin_45343878的博客
08-15 1985
新建页面page （1）手动创建 ①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录” ②右键单击新建的目录，在弹出的菜单中选择“新建Page” （2）自动创建 直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件 删除页面page...
微信小程序实现页面下拉刷新
weixin_44836808的博客
04-16 1490
微信小程序实现页面下拉刷新 本文将简单介绍如何实现微信小程序的下拉刷新 将要使用的api： wx.showNavigationBarLoading(Object object) wx.showLoading(Object object) wx.hideLoading(Object object) wx.hideNavigationBarLoading(Object object) wx.sto...
微信小程序：enablePullDownRefresh、onReachBottomDistance 、动态设置窗口的背景色、动态设置下拉背景字体
weixin_38909589的博客
05-22 1万+
一、enablePullDownRefresh 1、下拉刷新enablePullDownRefresh的支持 单页面配置json文件 { "backgroundTextStyle": "dark" } app.json配置（所有页面都带有下拉刷新功能） { "window": { "enablePullDownRefresh": true } } 2、设置...
微信小程序之下拉刷新功能
qq_36742720的博客
09-04 485
首先，需要在.json文件中设置"enablePullDownRefresh": true,就是启用页面的下拉刷新功能，如果你想在项目中的所有页面中都设置，那么在app.json中放入这句代码即可。 设置好了.json文件后，接下来是.js文件，需要添加一个  onPullDownRefresh事件监听页面下拉，即添加如下代码： //下拉刷新 onPullDownRefresh:...
微信小程序实现下拉刷新功能
m0_58819594的博客
08-02 2818
onPullDownRefresh:function(){ console.log('开始下拉刷新') wx.showNavigationBarLoading()//在标题栏中显示加载图标 this.data.currentPage = 1 this.data.dataList = [] //dataList为获取到的列表数组，自行替换 this.getRepairListMine()//重新获取列表页 setTimeout(() => { ...
微信小程序下拉加载和上拉刷新两种实现方法
Gabriel的专栏
08-27 1万+
转自：https://www.cnblogs.com/simba-lkj/p/6274232.html 方法一：onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 属性 类型 描述 enablePullDown...
⑥微信小程序--》小程序全局配置和详解下拉刷新和上拉触底页面事件
最新发布
weixin_42017221的博客
10-23 1461
上拉触底是移动端的专有名称，通过手指在屏幕上的滑动操作，从而加载更多数据的行为。简言之：当手机浏览页面时，需要下滑得到更多内容，当滚动条滚动到下面多少的距离需要自动加载下一页，这个距离就是上拉触底的距离。默认距离为50px，如果没有特殊需求，建议使用默认值即可。
让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
热门推荐
希望看完文章的你能够带着答案离开
04-07 1万+
让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
小程序 之下拉刷新
HQ\(^o^)/的博客
10-09 4206
前面既然写了篇 上拉加载 ，那么就有下拉刷新。
小程序实现下拉刷新功能
m0_56685900的博客
12-06 666
.js //下拉刷新 onRefresh(){ wx.showNavigationBarLoading(); //弹窗 wx.showLoading({ title: '刷新中...', }) this.getData(); }, //网络请求，获取数据 getData(){ wx.request({
微信小程序下拉刷新优化
weixin_41160560的博客
03-23 570
微信小程序下拉刷新 /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { //0.5s加载显示，如果不加会一直显示加载中，造成不好的用户体验 var that = this wx.showNavigationBarLoading() //在标题栏中显示加载 setTimeout(...
微信小程序界面下拉刷新实现方法
Joychen404的博客
05-25 1万+
微信小程序中，通过下拉刷新页面是基本操作，在当前页面排满的情况下继续下拉加载更多内容。小程序和网页都可以实现这一功能，不同的是小程序界面有能实现下拉刷新功能的API，只需从系统调用即可。通过查看微信开发文档可知，enablePullDownRefresh 这个属性设置为true。就默认开启了下拉刷新。enablePullDownRefresh可以写在app.json 中 和页面的xxx.json，...
微信小程序：下拉刷新与轮播图实战教程
在微信小程序开发中，实现下拉刷新和轮播图功能是常见的交互设计需求，本文将详细介绍如何在小程序中集成这两个特性。首先，我们来看如何实现下拉刷新效果。 1. **下拉刷新（Pull-to-Refresh）** 在`<scroll-view>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值