微信小程序开发学习笔记——4.9【小案例】开启下拉刷新页面enablePullDownRefresh

本文主要是介绍微信小程序开发学习笔记——4.9【小案例】开启下拉刷新页面enablePullDownRefresh，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：4.9.【小案例】开启下拉刷新页面enablePullDownRefresh_哔哩哔哩_bilibili

一、api2.json

小程序配置 / 页面配置 (qq.com)

{"usingComponents": {},"enablePullDownRefresh":true,"backgroundColor": "#eee","backgroundTextStyle":"light"
}

二、api2.js

  onLoad(options) {wx.showLoading({title: '加载中',mask:true})this.setData({listArr:[]})this.getData();},getData(){wx.request({url: 'https://api.thecatapi.com/v1/images/search?limit=2',success:res=>{console.log(res.data);this.setData({listArr:res.data})wx.stopPullDownRefresh()  //正常请求完数据之后，就停止显示下拉刷新。//wx.hideLoading()  //正常请求完数据之后，就停止显示加载中},complete:err=>{wx.hideLoading() //无论请求成功还是失败，都停止显示加载中}})},

界面 / 交互 / wx.hideLoading (qq.com)

界面 / 下拉刷新 / wx.stopPullDownRefresh (qq.com) 

  onPullDownRefresh() {this.setData({ //先清空，再获取新的数据listArr:[]})this.getData();},

在.js文件生命周期中找到下拉刷新  onPullDownRefresh(){}，在这里编写获取数据的代码，如此一来下拉刷新的时候才会更新数据显示。

三、api2.wxml和api2.wxss和上一篇一样

四、结果

图片会先清空再加载新图。点击编译，会显示加载中，不管是否成功读取数据，只要完成数据读取代码，加载中就会消失。

这篇关于微信小程序开发学习笔记——4.9【小案例】开启下拉刷新页面enablePullDownRefresh的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---