上拉触底案列onReachBottom

上拉触底颜色盒子案例  不断获得随机颜色盒子

渲染wxml  

<view class="colorBox" wx:for="{{colorList}}" wx:key="index" 
style="background-color:rgba({{item}})">
{{item}}
</view>

在wxss中 

.colorBox{
  width:100%;
  height:300rpx;
  border:1px solid #fff;
  border-radius:10px;
  text-align:center;
  line-height:300rpx;
}

在json文件中设置上拉触底距离，默认是50px，不用带单位，默认px

 "onReachBottomDistance":100

在js中的onReachBottom()函数中设置

 onReachBottom: function () {
console.log("底部")
// 判断是否false,false发起请求
console.log("isLoading:"+this.data.isLoading)
if(this.data.isLoading==false){
  this.getColor();
}
  },

  data: {
isLoading:false,  //数据节流
colorList:[]
  },
getColor(){
  // 控制节流
  this.setData({
    isLoading:true
  })
  //展示提示框
wx.showLoading({
  title: '数据加载中',
})
wx.request({
  url:'https://www.escook.cn/api/color',
  method:'GET',
success:(res)=>{
console.log(res.data);
this.setData({
   colorList:[...this.data.colorList,...res.data.data]  //拼接数组
})
},
complete:()=>{
  //节流
  this.setData({
    isLoading:false
  })
  //数据加载完成，隐藏加载效果
    wx.hideLoading()
}
})
},

节流----控制数据在加载完成之后在进行下一次加载