小程序基础 2.0

第四单元 小程序基础二

一、昨日知识点回顾

1.小程序中的事件
2.wxs
3.列表渲染
4.条件渲染

---

二、本单元知识点概述

（Ⅰ）指定教材

无

（Ⅱ）知识点概述

（Ⅲ）教学时长

---

三、本单元教学目标

（Ⅰ）重点知识目标

1.下拉加载和上拉刷新
2.小程序的页面跳转
3.网络请求

（Ⅱ）能力目标

1.掌握下拉加载和上拉刷新
2.掌握小程序的页面跳转
3.掌握网络请求

---

四、本单元知识详讲

4.1. 下拉刷新

4.1.1 下拉刷新的概念以及场景

• 概念：下拉刷新是移动端更新列表数据的交互行为，用户通过手指在屏幕上自上而下的滑动，可以触发页面的下拉刷新，更新列表数据

• 应用场景：在移动端，数据列表是常见的页面效果，更新列表数据是最基本的页面需求，相比于按钮刷新、定时刷新来说，下拉刷新的用户体验方便友好，已经成为移动端刷新列表数据的最佳解决方案

4.1.2 如何设置下拉刷新

• 方式一：需要在app.json 的 window 选项中或页面配置中开启enablePullDownRefresh。但是，一般情况下，推 荐在页面配置中为需要的页面单独开启下拉刷新行为

• 方式二：可以通过wx.startPullDownRefresh()触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致

• 示例代码：

  通过配置enablePullDownRefresh来为页面开启下拉刷新功能

  {
      "enablePullDownRefresh": true
  }

  通过wx.startPullDownRefresh()来为页面开启下拉刷新功能

  <button bindtap="refresh">点击刷新页面</button>

  Page({
      refresh() {
          console.log(1)
          wx.startPullDownRefresh()
      }
  })

  注意：即使通过startPullDownRefresh方法实现下拉刷新，也要在页面中配置enablePullDownRefresh属性

4.1.3 设置下拉刷新窗口的样式

• 需要在app.json 的 window 选项中或页面配置中修改backgroundColor和backgroundTextStyle选项

  • backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制颜色值

  • backgroundTextStyle 用来配置下拉刷新loading的样式，仅支持 dark 和 light

• 示例代码：

  {
      "backgroundColor": "#eee",
      "backgroundTextStyle": "dark"
  }

4.1.4 监听下拉刷新事件

• 为页面添加onPullDownRefresh()函数，可以监听用户在当前页面的下拉刷新事件

• 示例代码：

  // 监听下拉刷新的事件
  onPullDownRefresh() {
      console.log('页面刷新了')
      this.setData({
          arr: [1, 2]
      })
  }

4.1.5 停止下拉刷新

• 当通过startPullDownRefresh方法处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用wx.stopPullDo