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

目录

一、下拉刷新的定义

二、下拉刷新的启用

三、配置下拉刷新的样式

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

五、停止下拉刷新的效果


一、下拉刷新的定义

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

二、下拉刷新的启用

启用下拉刷新有两种方式

(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()
 },
相关推荐
蓝帆傲亦2 小时前
支付宝小程序性能暴增秘籍:UniApp项目极限优化全攻略
小程序·uni-app
CHU7290357 小时前
淘宝扭蛋机抽盒小程序前端功能解析:解锁趣味抽盒新体验
前端·小程序
2501_933907219 小时前
深圳本凡科技专业企业APP开发,助力手机应用创新优化
科技·微信小程序·小程序
每天都要加油呀!10 小时前
TypeError: uni.requestPayment is not a function
小程序
java1234_小锋10 小时前
分享一套优质的微信小程序校园志愿者系统(SpringBoot后端+Vue3管理端)
微信小程序·小程序·校园志愿者
2501_9160088912 小时前
深入解析iOS机审4.3原理与混淆实战方法
android·java·开发语言·ios·小程序·uni-app·iphone
打破砂锅问到底00712 小时前
AI 驱动开发实战:10分钟从零构建「微信群相册」小程序
人工智能·微信·小程序·ai编程
CHU72903512 小时前
扭蛋机盲盒小程序前端功能设计解析:打造趣味与惊喜并存的消费体验
前端·小程序
QT.qtqtqtqtqt13 小时前
uni-app小程序前端开发笔记(更新中)
前端·笔记·小程序·uni-app
CHU72903515 小时前
直播商城APP前端功能全景解析:打造沉浸式互动购物新体验
java·前端·小程序