页面事件(下拉刷新，上拉加载）

下拉刷新

手指在屏幕上下拉滑动操作，重新加载页面数据

步骤

1.启动下拉刷新

2.配置下拉刷新窗口样式

3监听下拉刷新事件

4停止下拉刷新动作

---

上拉加载

步骤

1.配置上拉触底距离

2.监听页面的上拉触底事件

---

上拉触底案例

1.定义获取随机颜色的方法

getColors(){
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:(data)=>{
        console.log(data.data.data)
        this.setData({
          colorList:data.data.data
        })
      }
    })
  },

2.在页面加载时获取初始数据onLoad

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   this. getColors()
  },

3.渲染页面解构 美化效果

<view  class="box" wx:for="{{colorList}}" wx:key="*this" style="background-color:rgb({{item}}) ;">{{item}}</view>

4.上拉触底时调用获取随机颜色的方法

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
     console.log("触发了上拉触底事件")
     this.getColors()
  },
 //  1定义获取随机颜色的方法
  getColors(){
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:(data)=>{
        console.log(data.data.data)
        this.setData({
          colorList:[...this.data.colorList,...data.data.data]
        })
      }
    })
  },

5.添加loading加载

• 请求前添加loading

• 请求完成关闭loading

getColors(){
 
  //  开启loading
  wx.showLoading({
    title: '数据加载中',
  })

    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:(data)=>{
        console.log(data.data.data)
        this.setData({
          colorList:[...this.data.colorList,...data.data.data]
        })
      },
      // 接口调用结束的回调函数
      complete:()=>{
        wx.hideLoading()
      }
    })
  },