微信小程序：13.页面事件

下拉刷新

下拉刷新，指的是在移动设备中，手指进行下拉华东操作，从而重新加载页面数据的行为。

如何在小程序中启用下拉刷新

全局开启

在app.json中进行配置window节点，并且将enablePullDownRefresh设置为true

局部开启

在页面的json文件中配置，将enablePullDownRefresh设置为true

配置下拉刷新窗口样式

在全局或页面的json文件中配置，backgroundColor和backgroundTextStyle来配置刷新窗口：

• backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
• backgroundTextStyle用来配置下拉刷新loading的样式，仅支持dark和light

监听下拉刷新事件

在页面的js文件中，通过onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
      console.log("触发了下拉刷新");
  },

停止下拉刷新效果

因为下拉刷新缺乏自动关闭方法，我们可以使用方法进行自动关闭

  onPullDownRefresh() {
      console.log("触发了下拉刷新");
      wx.stopPullDownRefresh()
  },

上拉触底案例

1. 定义一个随机颜色的方法
2. 在页面加载的时候获取初始值数据
3. 渲染UI结构并美化页面效果
4. 在上拉触底时调用随机颜色方法
5. 添加loading提示效果
6. 对上拉触底进行节流处理

获取随机颜色方法

getColors(){
    wx.request({
      url: 'https://mock.apifox.com/m1/4376673-4020798-default/api/getcolorlist',
      method:'GET',
      success:(res)=>{
        console.log(res.data);
        this.setData({
          colorList:[...this.data.colorList,...res.data.colorlist]
        })
      }
    })
  },

上拉触底

:::info
上拉触底，是通过手指在屏幕上的上拉华东操作，从而加载更多数据的行为
:::
一般在移动端，我们用于分页处理

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

在页面的js文件中，通过onReachBottom()函数可以监听当前页面的上拉触底事件：

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

同一时间只允许触发一次请求

配置上拉触底距离

上拉触底距离，和上拉触底距离一样，就是滚动条，到底部距离设置
可以在json文件中进行配置，通过onReachBottomDistance属性来配置上拉触底的距离，默认为50px
wxml代码

<view wx:for="{{colorList}}" class="num-item" style="background-color:{{item.color}}">{{item.color}}</view>

wxss代码

.num-item{
  border: 1rpx solid  #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
}

js请求代码

getColors(){
    wx.request({
      url: 'https://mock.apifox.com/m1/4376673-4020798-default/api/getcolorlist',
      method:'GET',
      success:(res)=>{
        console.log(res.data);
        this.setData({
        //[]列表中有两个值，第一个值为原来的列表，第二个值为新获取的列表
          colorList:[...this.data.colorList,...res.data.colorlist]
        })
      }
    })
  },

上拉触底获取随机颜色

只需要在上拉触底函数中再次调用getcolor函数即可

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

调用wx.showloading进行加载效果展示

getColors(){
    // 在加载前调用展示loading方法
    wx.showLoading({
      title: '数据正在加载中',
    })
    wx.request({
      url: 'https://mock.apifox.com/m1/4376673-4020798-default/api/getcolorlist',
      method:'GET',
      success:(res)=>{
        console.log(res.data);
        this.setData({
          colorList:[...this.data.colorList,...res.data.colorlist]
        })
      },
      // 在请求结束后调用wx.hideLoading()效果
      complete:()=>{
        wx.hideLoading()
      }

    })
  },

关于wx.showloading()详情可以参考官方文档

对上拉触底进行节流处理

如果多次请求数据，造成数据大量加载，节流就是上一次数据加载完后，在此加载下一页数据
节流步骤：在data中定义isloading节流阀->在getColor中修改isloading的值->在onReachBottom中判断节流阀值，从而对请求进行控制

data: {
    // 导航传递过来的参数
    query:{},
    colorList:[],
    isloading:false
  },
  getColors(){
    // 设置节流true
    this.setData({
      isloading:true
    })
    // 在加载前调用展示loading方法
    wx.showLoading({
      title: '数据正在加载中',
    })
    
    wx.request({
      url: 'https://mock.apifox.com/m1/4376673-4020798-default/api/getcolorlist',
      method:'GET',
      success:(res)=>{
        console.log(res.data);
        this.setData({
          colorList:[...this.data.colorList,...res.data.colorlist]
        })
      },
      // 在请求结束后调用wx.hideLoading()效果
      complete:()=>{
        // 重置节流
        this.setData({
          isloading:false
        })
        wx.hideLoading()
      }

    })
  },

触发事件判断节流

onReachBottom() {
    // 判断节流
    if (this.data.isloading) return
      this.getColors()
  },