微信小程序（下拉刷新数据）新手向

记录一下困扰自己的一个小问题，也给各位小伙伴一个借鉴呀~
在做自己的个人小程序项目时，需要实现用户下拉刷新数据，看了很多教程，都在说用scroll-view来实现，但是自己对样式要求不高，就使用微信自带的吧~

实现的效果：

1，如果需要全局都实现下拉刷新的话，可以在app.json文件，window里面进行配置启用下拉刷新，只有一两个页面不需要下拉刷新的话，就在页面的json文件内配置，关闭下拉刷新

开启全局下拉刷新----->
app.json：

{"window": {//json文件不能注释，但是为了便于解释写在这里哈，"backgroundTextStyle": "dark", //backgroundTextStyle仅支持dark / light，如果设置为light的话三个点的加载动画和背景色一样就看不出来"enablePullDownRefresh": true }
}

局部关闭下拉刷新----->
index.json:

{"enablePullDownRefresh": false
}

同理可得只有一两个页面需要刷新，就在页面的页面的json文件内配置，开启下拉刷新即可

2，刷新数据
当我们顶部下拉时会触发微信的 onPullDownRefresh 函数，在这里面我们就可以重新请求数据
index.js:

async onPullDownRefresh(){const res=await wx.request({url: xxx,method:xxx,data: xxx
})
//当请求完成后我们需要调用 wx.stopPullDownRefresh()停止刷新，下拉窗口弹回wx.stopPullDownRefresh()
}

总结：如果对样式要求不高的话，这样就能实现效果啦。在onPullDownRefresh函数使用async 异步函数，等待数据返回，具体的请求后台数据方法可以看看我的其他文章哈！

微信小程序（下拉刷新数据）新手向相关推荐

html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
微信小程序下拉刷新问题
微信小程序下拉刷新问题我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
微信小程序下拉刷新列表onPullDownRefresh；微信小程序上划加载列表onReachBottom；uni-app微信小程序下拉加载数据；uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
微信小程序下拉刷新和上拉加载的实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...
微信小程序下拉刷新/上拉加载组件
简介一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件,需要基础库2.10.1及以上, 项目地址:github 预览功能下拉刷新上拉加载支持自定义下拉样式 ...
微信小程序下拉刷新、上拉加载
微信小程序官方没有给出具体的下拉刷新和上拉加载组件,我们可以基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载.下拉刷新组件. 1. 封装组件 // components/cus ...
微信小程序下拉刷新的实现
本文将简单介绍如何实现微信小程序的下拉刷新将要使用的api: wx.showNavigationBarLoading(Object object) wx.showLoading(Object obj ...
微信小程序下拉刷新/上拉加载更多（上拉加载更多怎么实现）
参考:微信小程序开发文档->框架>逻辑层->注册页面实现原理: 1.下拉刷新:由于小程序数据是实时渲染的.我们把data{}内的数据清空重新加载即可实现下拉刷新. 2.上拉加载更多 ...

微信小程序（下拉刷新数据）新手向

微信小程序（下拉刷新数据）新手向相关推荐

最新文章

热门文章