实现步骤：

• 定义获取随机颜色的方法

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

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

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

• 添加 loading 提示效果

• 对上拉触底进行节流处理

 // pages/list/list.js
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
         // 随机颜色列表
         colorList: [],
         
         // 节流阀 false-当前没有进行任何数据请求 true-正在进行数据请求
         isloading: false
     },
     
     /* 获取随机颜色的方法 */
     getColors(){
         // 正在进行数据请求，设置为 true
         this.setData({
             isloading: true
         })
         
         // 5.1 添加 loading 效果
         wx.showLoading({
           title: '数据加载中...',
         })
         
         // 发送请求，获取随机颜色值的数组
         wx.request({
             url: 'https://www.escook.cn/api/color',
             method: 'GET',
             
             success:({data: res}) => {
                 this.setData({
                     colorList: [...this.data.colorList,...res.data]
                 })
             },
             
             // 5.2 获取成功后隐藏 loading 效果
             complete: () => {
                 wx.hideLoading()
                 
                 // 数据请求完毕，设置为 false
                 this.setData({
                     isloading: false
                 })
             }
         })
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
         this.getColors();
     },
 
     /**
      * 页面上拉触底事件的处理函数
      */
     onReachBottom() {
         // 判断节流阀的值，对数据请求进行节流控制
         // isloading：true 代表正在进行数据请求，故应该阻止当前上拉事件请求
         // isloading：false 发起数据请求
         if(!this.data.isloading){
             this.getColors();
         }
         
     }
 })

 /* pages/list/list.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 5rpx #aaa;
 }

 
 
 {{item}}

3.3 生命周期

3.3.1 生命周期简介

生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段

把每个小程序运行的过程，也概括为生命周期：

• 小程序的启动，表示生命周期的开始

• 小程序的关闭，表示生命周期的结束

• 中间小程序运行的过程，就是小程序的生命周期

3.3.2 生命周期的分类

在小程序中，生命周期分为两类，分别是：

• 应用生命周期：特指小程序从启动 -> 运行 -> 销毁的过程

• 页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示：

3.3.3 生命周期函数

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行

生命周期函数的作用：允许程序在特定的时间点，执行某些特定的操作

例如：页面刚加载的时候，可以在onLoad 生命周期函数中初始化页面的数据

注意：生命周期强调的是时间段，生命周期函数强调的是时间点

同样，小程序中的生命周期函数分为两类，分别是：

• 应用的生命周期函数：特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数
• 页面的生命周期函数：特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数

3.3.4 应用的生命周期函数

应用生命周期函数需要在 app.js 中进行声明

示例如下：

 // app.js
 App({
     // 小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化工作
     onLaunch(options){
         
     },
     
     // 小程序启动，或从后台进入前台显示时触发
     onShow(options){
         
     },
     
     // 小程序从前台进入后台时触发
     onHide(){
         
     }
 })

3.3.5 页面的生命周期函数

页面生命周期函数需要在页面的 .js 文件中进行声明

示例如下：

 // pages/list/list.js
 Page({
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {  
     },
 
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady() {
     },
 
     /**
      * 生命周期函数--监听页面显示
      */
     onShow() {
     },
 
     /**
      * 生命周期函数--监听页面隐藏
      */
     onHide() {
     },
 
     /**
      * 生命周期函数--监听页面卸载
      */
     onUnload() {
     },
 
     /**
      * 页面相关事件处理函数--监听用户下拉动作
      */
     onPullDownRefresh() {
     },
 
     /**
      * 页面上拉触底事件的处理函数
      */
     onReachBottom() {       
     },
 
     /**
      * 用户点击右上角分享
      */
     onShareAppMessage() {
     }
 })

3.4 WXS 脚本

3.4.1 概述

1. WXS

WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构

2. WXS的应用场景

wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数

因此，小程序中wxs 的典型应用场景就是“过滤器”

3. WXS 与 JavaScript 的关系

wxs 的语法 类似于 JavaScript，但两者是不同的语言

• wxs 有自己的数据类型
• number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型
• function 函数类型、array 数组类型、 date 日期类型、 regexp 正则

• wxs 不支持类似于 ES6 及以上的语法形式
• 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
• 支持：var 定义变量、普通 function 函数等类似于 ES5 的语法

• wxs 遵循 CommonJS 规范
• module 对象
• require() 函数
• module.exports 对象

3.4.2 基础语法

1. 内嵌 wxs 脚本