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

目录

一、下拉刷新的定义

二、下拉刷新的启用

三、配置下拉刷新的样式

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

五、停止下拉刷新的效果


一、下拉刷新的定义

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

二、下拉刷新的启用

启用下拉刷新有两种方式

(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()
 },
相关推荐
paterWang31 分钟前
基于 SSM框架 的 “捷邻小程序” 系统的设计与实现
小程序
Vin__44 分钟前
微信小程序客服消息接收不到微信的回调
spring boot·微信小程序·小程序
计算机软件程序设计1 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
lvbb661 小时前
微信小程序-二维码绘制
微信小程序·小程序
!win !2 小时前
我与微信审核的“相爱相杀”看个人小程序副业
微信小程序·个人开发·个人副业
狂团商城小师妹3 小时前
智慧废品回收小程序php+uniapp
大数据·微信·微信小程序·小程序·uni-app·微信公众平台
毕业设计-015 小时前
0083.基于springboot+uni-app的社区车位租赁系统小程序+论文
spring boot·小程序·uni-app
算是难了8 小时前
微信小程序-组件复用机制behaviors
微信小程序·小程序
说私域8 小时前
电商运营中私域流量的转化与变现:以开源AI智能名片2+1链动模式S2B2C商城小程序为例
人工智能·小程序·开源·流量运营
EasyNVR13 小时前
基于WebRTC与AI大模型接入EasyRTC:打造轻量级、高实时、强互动的嵌入式音视频解决方案
运维·服务器·微信·小程序·webrtc·p2p·智能硬件