微信小程序的上拉触底和节流操作

主要技术

微信小程序自带的各种方法和api ; 箭头函数 ；三点运算符拼接字符串 ；节流思想；对象解构重新命名。

大概思路

首先在js页面中获取页面数据，此次用颜色来看，更方便辨认。如下图所示。

所以先用get方法去获取颜色数据：

在data里定义colorList数组来接受GET请求来的数据，这里要注意需要重构以下对象命，因为作者请求的api里需要的数据被两层data包着，所以用对象解构重新命名的方法将数据获得，如果不去重新命名会报undefined的错误。但是如果你需要的数据后端给你包的比较好可以直接用res接收过来就行，然后用三点运算符拼接法把新老数据拼接起来。

 

 

然后在页面加载时运行方法

 再去搭建wxml页面，直接用行内表达式把颜色的rgba值给进去就好了

 在美化一下页面

 上面都是正常的页面搭建。然后给上拉触底效果和自动弹出加载框效果，运用微信自带的 wx.showLoading（）， wx.hideLoading（）两个方法实现弹出加载框和加载完自动消失的效果，

然后在onReachBottom中添加getColors（）方法。wx.showLoading（）方法写在getColors（）开头，wx.hideLoading（）写在getColors（）结尾，注意wx.hideLoading（）要写在request里面

节流操作

目的：以防单次下拉多次请求数据。

思路：在data里定义一个isloading来判断是否在请求数据，给它初始的false值。在数据开始请求前将isloading改为true，在请求完成时再改为false，同时再页面开始加载的函数下加一个判断条件，只有当isloading是false时才请求数据，完整代码如下：

 路漫漫兮其修远兮，任重而道远啊