小程序-下拉刷新/下拉触底小练习 -底部附源码

【----------上拉触底案例------------】

实现页面上拉触底重新加载数据

【案例实现步骤】

• 定义获取随机颜色的方法
• 在页面加载时获取初始数据
• 渲染UI结构并美化页面效果
• 在上拉触底时，调用随机颜色的方法
• 添加loading提示效果
• 对上拉触底进行节流处理

【①】获取随机颜色的方法

【------home.js中------】

data: {

    colorList:[]         //随机颜色列表

  },

  getColors(){               //定义获取颜色的方法

    wx.request({             //发起请求，获取随机颜色值的数组

      url: 'https://www.escook.cn/api/color',

      method: "GET",

      success:({data:res})=>{

        this.setData({

          colorList:[...this.data.colorList,...res.data]       //将新的data值，赋给旧的data

        })

      }

    })

  },

【②】 在页面加载时获取初始数据

【------home.js中------】

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

    this.getColors()

  },

【③】 渲染UI结构并美化页面效果

【------home.wxml中------】

<view wx:for="{{colorList}}" wx:key="index" class="colors_colors" style="background-color: rgba({{item}});">{{item}}</view>

【------home.wxss中------】

.colors_colors{

  border: 1px solid red;

  border-radius: 8rpx;       //圆角

  line-height: 200rpx;        //行高 

}

【④】 在上拉触底时，调用随机颜色的方法

【------home.js中------】

   /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

    this.getColors()

  },

【⑤】 添加loading提示效果

微信开发者工具-->上方操作栏（帮助）-->开发者文档-->选择API-->wx.showLoading

wx.showLoading()用于显示Loading提示框

wx.hideLoading()用于关闭Loading提示框

【------home.js中------】

getColors(){                                             //定义获取颜色的方法

    wx.showLoading({                                                //展示Loading效果

      title: '数据加载中',

    }),

    wx.request({                                                       //发起请求，获取随机颜色值的数组

      complete:()=>{

        wx.hideLoading()                                                          //关闭Loading效果

      }

    })

  },

【⑥】 对上拉触底进行节流处理

上拉触底多次，会导致数据加载量过大，数据会出现问题

步骤：

Ⅰ->在data中定义isloading节流阀

• false：当前没有进行任何请求数据
• true：当前正在进行请求数据

Ⅱ->在个体Colors()方法中修改isloading节流阀的值

• 在刚调用getColors时，将节流阀设置为true
• 在网络请求的complete回调函数中，将节流阀重置为false

Ⅲ->在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制

• 如果节流阀的值为true，则阻止当前请求
• 如果节流阀的值为false，则发起数据请求

【------home.js中------】

/**

   * 页面的初始数据

   */

  data: {

    isloading:false            //data数据没有进行任何数据请求 

  },

getColors(){                       //定义获取颜色的方法

      this.setData({

      isloading:true             //进行数据请求

    }),

wx.request({    

        complete:()=>{

          wx.hideLoading(),       //关闭Loading效果

          this.setData({

           isloading:false

        })

      }

/**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

    if(this.data.isloading) return      //如果data中的isloading为true,则return出去，否则继续发起对应请求

    this.getColors()

  },

【全部代码】

home.js

---

Page({

  /**
   * 页面的初始数据
   */
  data: {
    colorList:[], //随机颜色列表
    isloading:false
  },

  getColors(){               //定义获取颜色的方法
    this.setData({
      isloading:true
    }),
    wx.showLoading({             //展示Loading效果
      title: '数据加载中',
    }),
    wx.request({             //发起请求，获取随机颜色值的数组
      url: 'https://www.escook.cn/api/color',
      method: "get",
      success:({data:res})=>{
        this.setData({
          colorList:[...this.data.colorList,...res.data]       //将新的data值，赋给旧的data
        })
      },
      complete:()=>{
        wx.hideLoading(),       //关闭Loading效果
        this.setData({
          isloading:false
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if(this.data.isloading) return      //如果data中的isloading为true,则return出去，否则继续发起对应请求
    this.getColors()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

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

  },

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

[home.wxml]

<view wx:for="{{colorList}}" wx:key="index" class="colors_colors" style="background-color: rgba({{item}});">{{item}}</view>

[home.wxss]

.colors_colors{
  border: 1px solid red;
  border-radius: 8rpx;        /* 圆角 */
  line-height: 200rpx;        /* 行高 */  
}