微信小程序-上拉触底案例

1.案例效果展示

 2.案例的实现步骤

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

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

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

④在上拉触底时调用获取颜色的方法

⑤添加loading提示效果

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

3.步骤1-定义获取随机颜色的方法

 3.步骤2-在页面加载时获取初始数据

 3.步骤3-渲染UI结构并美化页面效果

 3.步骤4-上拉触底时获取随机颜色

 3.步骤5-添加loading提示效果

3.步骤6-对上拉触底进行节流处理

①在data中定义inloading节流阀

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

②在getColors（）方法中修改isloading节流阀的值

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

③在onReachBotton中判断节流阀的值，从而对数据请求进行节流控制 

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