页面事件 - 上拉触底案例

页面事件 - 上拉触底案例

1. 案例效果展示

2. 案例的实现步骤

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

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

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

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

⑤ 添加 loading 提示效果

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

（1）步骤1 - 定义获取随机颜色的方法

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

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

（4）步骤4 - 上拉触底时获取随机颜色

（5）步骤5 - 添加 loading 提示效果

（6）步骤6 - 对上拉触底进行节流处理

① 在 data 中 定义 isloading 节流阀

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

② 在 getColors() 方法中修改 isloading 节流阀的值

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

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

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