微信小程序开发---下拉刷新-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序开发---下拉刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、下拉刷新的定义

二、下拉刷新的启用

三、配置下拉刷新的样式

四、监听页面的下拉刷新事件

五、停止下拉刷新的效果

一、下拉刷新的定义

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，让页面重新加载数据

二、下拉刷新的启用

启用下拉刷新有两种方式

（1）全局开启。

在app.json的windows节点中，将enablePullDownRefresh设置为true

（2）局部开启

在页面的.json文件中，将enablePullDownRefresh设置为true

我们一般推荐使用第二种

三、配置下拉刷新的样式

backgroundColor用来配置下拉刷新的窗口的背景颜色，仅支持十六进制

backgroundTextStyle用来配置下拉刷新loading的样式，仅支持dark和light

注意是在json文件，而不是js文件中写
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ff0000",
   "navigationBarTextStyle": "white",
   "backgroundColor": "#efefef"      //灰色
}

四、监听页面的下拉刷新事件

在页面的.js文件中，通过onPullDownRefresh（）函数即可监听当前页面的下拉刷新事件
//js文件
onPullDownRefresh(){
   console.log('刷新')
 }

五、停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果。此时调用wx.stopPullDownRefresh（）可以停止当前页面的下拉刷新。
 onPullDownRefresh(){
   this.setData({
     count:0
   })
   wx.stopPullDownRefresh()
 },

文章来源地址https://www.toymoban.com/news/detail-704970.html

到了这里，关于微信小程序开发---下拉刷新的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！