《微信小程序开发实战》学习笔记chapter07 第一个实例 5.上拉触底事件

上拉（上滑），加载更多数据

1.监听页面上拉触底事件：

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

2.配置上拉触底距离:

上拉触底距离是触发上拉触底事件时，滚动条距离页面底部的距离。可以在全局或页面的.json配置文件中配置。

{
  "usingComponents": {},
  "onReachBottomDistance": 150
}

3.案例：

//第一，定义获取随机颜色的方法：
  /**
   * 页面的初始数据
   */
  data: {
    colorlist: []
  },

  getcolors() {
    wx.request({
      url: 'https://escook.cn/api/color',
      method: 'get',
      success: ({ data: res }) => {     
        console.log(res)   
        this.setData({
          colorList:[...this.data.colorlist,...res.data] 
        })
      }
    })
  },
      
//第二，在页面加载时获取初始数据：
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options) {
    this.getcolors()
  },
      
//第三，渲染UI结构并美化页面效果：
/* pages/contact/contact.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;
} 

//第四，在上拉触底时调用获取随机颜色的方法：

{{item}}

//第五，添加loading提示效果：
  getcolors() {
    //显示loading效果
    wx.showLoading({
      title: '数据加载中...',
    })
    
    wx.request({
      url: 'https://escook.cn/api/color',
      method: 'get',
      success: ({ data: res }) => {     
        console.log(res)   
        this.setData({
          colorList:[...this.data.colorlist,...res.data] 
        })
      },
      //与success平级，隐藏loading效果
      complete:() =>{     
        wx.hideLoading({
          success: (res) => {},
        })
      }
    })
  },

//第六，对上拉触底进行节流处理：
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },