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

目录

一、下拉刷新的定义

二、下拉刷新的启用

三、配置下拉刷新的样式

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

五、停止下拉刷新的效果


一、下拉刷新的定义

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

二、下拉刷新的启用

启用下拉刷新有两种方式

(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()
 },
相关推荐
CHU7290351 小时前
定制专属美丽时刻:美容预约商城小程序的贴心设计
前端·小程序
hnxaoli8 小时前
统信小程序(十)nutika打包elf格式程序
小程序
CHU7290358 小时前
家门口的邻里集市:社区团购小程序的功能探索
小程序
hnxaoli8 小时前
统信小程序(十一)快捷地址栏
linux·python·小程序
职豚求职小程序11 小时前
中国人保财险笔试如何通过?附刷题库小程序
小程序
chushiyunen11 小时前
python轻量级框架flask、做桌面小程序
python·小程序·flask
笨笨狗吞噬者12 小时前
【uniapp】小程序支持分包存放微信自定义组件 wxcomponents
前端·微信小程序·uni-app
蓝色心灵-海13 小时前
小律书 技术架构详解:前后端分离的自律管理系统设计
java·http·小程序·架构·uni-app
00后程序员张15 小时前
iPhone 无需越狱文件管理 使用Keymob查看导出文件
android·ios·小程序·https·uni-app·iphone·webview
毕设源码-朱学姐15 小时前
【开题答辩全过程】以 基于微信小程序的运动减肥管理系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序