微信小程序开发---下拉刷新

目录

一、下拉刷新的定义

二、下拉刷新的启用

三、配置下拉刷新的样式

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

五、停止下拉刷新的效果


一、下拉刷新的定义

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

二、下拉刷新的启用

启用下拉刷新有两种方式

(1)全局开启。

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

(2)局部开启

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

我们一般推荐使用第二种

三、配置下拉刷新的样式

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

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

注意是在json文件,而不是js文件中写

javascript 复制代码
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ff0000",
   "navigationBarTextStyle": "white",
   "backgroundColor": "#efefef"      //灰色
}

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

在页面的.js文件中,通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件

javascript 复制代码
//js文件
onPullDownRefresh(){
   console.log('刷新')
 }

五、停止下拉刷新的效果

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

javascript 复制代码
 onPullDownRefresh(){
   this.setData({
     count:0
   })
   wx.stopPullDownRefresh()
 },
相关推荐
程序鉴定师18 小时前
如何选择合适的深圳小程序开发公司?
大数据·小程序
阿豪啊19 小时前
微信小程序订阅消息实战:从模板配置到发送全流程
微信小程序
云起SAAS21 小时前
私域直播系统UniApp源码 多商户商城+直播带货 微信小程序+H5+安卓iOS
android·微信小程序·uni-app·私域直播系统
代码不加糖1 天前
从零手写简易 Taro:20 行 JSX 如何变成小程序?(硬核实战)
小程序·taro
云云只是个程序马喽2 天前
AI漫剧创作系统开发定制指南
人工智能·小程序·php
斯班奇的好朋友阿法法2 天前
鸿蒙 vs iOS vs 微信小程序:开发平台全面对比
ios·微信小程序·harmonyos
cosinmz3 天前
图片太多太乱怎么整理?分享一个我最近常用的图片转 PDF方法
经验分享·小程序·pdf
科技互联.3 天前
2026年小程序定制市场:个性化需求激增,技术深度成竞争关键
人工智能·小程序
小羊Yveesss3 天前
2026年小程序商城的现状和发展趋势
小程序
Greg_Zhong4 天前
微信小程序如何关闭:当前渲染模式为webview?
微信小程序·微信小程序渲染引擎·渲染引擎需搭配更高基础库