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

目录

一、下拉刷新的定义

二、下拉刷新的启用

三、配置下拉刷新的样式

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

五、停止下拉刷新的效果


一、下拉刷新的定义

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

二、下拉刷新的启用

启用下拉刷新有两种方式

(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 小时前
NFC标签打开微信小程序
前端·微信小程序
光影少年6 小时前
AIGC + Taro / 小程序
小程序·aigc·taro
2501_915918417 小时前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
2501_916007478 小时前
没有 Mac 用户如何上架 App Store,IPA生成、证书与描述文件管理、跨平台上传
android·macos·ios·小程序·uni-app·iphone·webview
天空属于哈夫克38 小时前
Go 语言实战:构建一个企微外部群“技术贴收藏夹”小程序后端
小程序·golang·企业微信
菜鸟una8 小时前
【微信小程序+Taro 3+NutUI 3】input (nut-input) 、 textarea (nut-texteare)类型使用避坑
前端·vue.js·微信小程序·小程序·taro
计算机毕设指导68 小时前
基于微信小程序的校园二手交易系统【源码文末联系】
java·spring boot·spring·微信小程序·小程序·tomcat·maven
Jiaberrr8 小时前
小程序setData性能优化指南:避开坑点,让页面丝滑如飞
前端·javascript·vue.js·性能优化·小程序
Code王8 小时前
【课程设计/毕业设计】基于springboot +微信小程序的家政服务平台系统基于小程序的家政服务系统安全开发【附源码、数据库、万字文档】
spring boot·小程序·课程设计
CHU7290358 小时前
旧物回收小程序前端功能版块解析:便捷赋能闲置循环
小程序