[移动开发]微信小程序页面事件 下拉刷新和上拉加载

下拉刷新

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

1.启动下拉刷新

全局配置 在app.json文件中的window中开启下拉刷新? enablePullDownRefresh:true

局部配置 在页面的.json文件中开启下拉刷新 enablePullDownRefresh:true

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

backgroundTypeStyle:dark? ?下拉的loading效果

backgroundColor 下拉的窗口效果

3.监听下拉刷新事件

通过onPullDownRefresh()监听用户下拉事件

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

4.停止下拉刷新动作

数据设置成功后，调用改函数，关闭下拉刷新动作

wx.stopPullDownRefresh()

上拉加载

手指在屏幕上上拉滑动动作，加载更多数据

1.在全局或者局部配置上拉触底的动作

配置上拉触底的距离? ?onReachBottomDistance : 60?

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

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
     console.log("触发了上拉触底事件")
  },

上拉触底案例

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

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

3.渲染页面解构，美化页面

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

5.添加loading提示效果

定义获取随机颜色的方法

 data:{
    colors:[]
 },

getColors() {
    wx.request({
      url: 'https://www.escook.cn/api/color', //随机颜色地址
      method:'GET',
      success:(res)=>{
        this.setData({
        //将获取到的随机颜色的数据赋值给colors数组
          colors:res.data.data
        })
      },
    })
  },

在页面加载时获取初始化数据

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

渲染页面解构，美化页面

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

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

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getColors()
  },

上拉触底时获取的新数据和旧数据进行合并

getColors() {
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:(res)=>{
        this.setData({
       //this.data.colors 旧数据 res.data.data下拉触底的新数据
          colors:[...this.data.colors,...res.data.data]
        })
      },
    })
  },

添加loading提示效果

getColors() {
    //开始加载
    wx.showLoading({
      title: '数据正在加载中',
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:(res)=>{
        this.setData({
          colors:[...this.data.colors,...res.data.data]
        })
      },
      // 请求完成后 不管成功失败 关闭loading加载
      complete:()=>{
        wx.hideLoading()
      }
    })
  },