【微信小程序】-- 页面事件 - 上拉触底 - 案例（二十七）

💌 所属专栏：【微信小程序开发教程】

😀 作  者：我是夜阑的狗🐶

🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘

文章目录

• 前言
• 一、上拉触底案例
• • • 1、案例效果
    • 二、获取随机颜色
    • 三、在页面加载时获取初始数据
    • 四、渲染 UI 结构并美化页面效果
    • 五、上拉触底时获取随机颜色
    • 六、添加 loading 提示效果
    • 七、对上拉触底进行节流处理
    • 总结

      ---

      前言

        大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第27篇文章;

        今天开始学习微信小程序的第15天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。

        专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。

        如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。

      ---

      一、上拉触底案例

        前面已经学习了页面事件–上拉触底，通过栗子学习了上拉触底的监听触发和配置上拉底距。接下来就来通过案例详细了解上拉触底事件。话不多说，让我们原文再续，书接上回吧。

      

      1、案例效果

        可以先来看一下要实现的效果图，图中有随机背景颜色的box，如下所示：

      

        想要实现上面的那个效果，实现步骤可分为 6 个步骤：

      • Step 1、首先定义获取随机颜色的方法；
      • Step 2、通过 onLoad 函数在页面加载时获取初始数据；
      • Step 3、获取数据之后，将其渲染在 UI 结构并美化页面效果；
      • Step 4、在上拉触底时调用获取随机颜色的方法；
      • Step 5、给上拉触底添加 loading 提示效果；
      • Step 6、对上拉触底进行节流处理，防止请求没完成之前，下一个请求触发；

        二、获取随机颜色

          首先来定义获取随机颜色的方法，具体代码如下：

        contact.js

          这里 colorList 数组要保留新旧数据一起，所以赋值的时候要采用拼接方式进行。

        Page({
          /**
           * 页面的初始数据
           */
          data: {
            colorList: []
          },
          
          /**
           * 获取随机颜色
           */
          getColors() {
            wx.request({
              url: 'https://www.escook.cn/api/color',
              method: 'GET',
              success: ({data: res}) =>{
                console.dir(res);
                this.setData({
                  colorList: [...this.data.colorList, ...res.data]
                })
              }
            })
          },
          /**
           * 生命周期函数--监听页面加载
           */
          onLoad(options) {
            this.getColors();
          },
        })
        

          可以来看一下控制台有没有打印出数据：

        

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

          在定义完随机获取颜色的方法之后，就要在页面加载的时候来获取了，具体代码如下：

        contact.js

          这里 colorList 数组要保留新旧数据一起，所以赋值的时候要采用拼接方式进行。

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

          点击 AppData 也能看到 colorList 数组也被赋值了。

        

        四、渲染 UI 结构并美化页面效果

          能获取数据之后，接下里就是将数据展示在页面上并对页面样式进行美化，因为要将 colorList 数组渲染在页面上，所以要用 wx:for 来进行实现，具体代码如下：

        contact.wxml

          注意这里不要忘记给 wx:key 赋值 ，其中还通过style动态绑定背景颜色。