微信小程序+tp6 实现瀑布流刷新

js页面代码

 data: {
    page:1,//页码
    movies:[],//即将展示的数据
    last_page:'',//最后一页页码
   
  },

    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
       wx.request({
         url: '',
         data:{
             pageSize :5,//每页查询条数
         },
         success:(res)=>{
           console.log(res);
           that.setData({
            activity:res.data.data.data,
             last_page:res.data.data.last_page,//获取最后一页的页码数存起来
           })
         }
       })
  },
 
  //瀑布流分页 上拉
  onReachBottom: function (e) {
    let _this = this;
    let page = _this.data.page+1;//获取下一页
        wx.showLoading({//温馨提示正在加载第几页
          title: '正在加载第'+page+"页",
        })
        if(page>_this.data.last_page)
        {//判断是否到最后一页
          wx.showToast({
           //友情提示
            title: '到底了',
            icon:'error'
          })
        }
       
    //设置定时器 过滤加载时间
    setTimeout(function(){
      wx.request({
        url: '',
        data:{
          page:page,//页码
          pageSize:5//一次查询几条
        },
        success(res){
          _this.setData({
              page:_this.data.page+1,//页码加一
              activity:_this.data.activity.concat(res.data.data.data)//两个数组合并
          })
        }
      })
      wx.hideLoading();//清除正在加载的时间
    },1000)
  },

 wxml

<!--pages/cart/cart.wxml-->
<view wx:for="{{movies}}" wx:key="index" wx:for-item="item">
  <l-card type="primary" full="{{true}}" image="{{item.img}}" title="{{item.name}}" bindtap="click" data-id="{{item.id}}">
    <view class="content">
      {{item.account}}
    </view>
    <view class="movie-name">
      <l-rate class="l-rate" score="{{ item.score }}" size="{{25}}"></l-rate>
      <text>{{ item.score }}分</text>
    </view>
  </l-card>
</view>
<!-- 提示框 -->

 wxss

.page-header {
  display: flex;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
}
.page-title {
  padding: 20rpx 40rpx;
  color: #999;
  font-size: 38rpx;
  text-align: center;
}
.page-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.item {
  display: flex;
  padding: 20rpx 40rpx;
  border-bottom: 1rpx solid #eee;
  cursor: pointer;
}
.item .poster {
  width: 128rpx;
  height: 128rpx;
  margin-right: 20rpx;
}
.item .meta {
  flex: 1;
}
.item .meta .title,.item .meta .sub-title {
  display: block;
  margin-bottom: 15rpx;
}
.item .meta .title {
  font-size: 32rpx;
}
.item .meta .sub-title {
  font-size: 22rpx;
  color: #c0c0c0;
}
.item .meta .artists {
  font-size: 26rpx;
  color: #999;
}
.item .rating {
  font-size: 28rpx;
  font-weight: bold;
  color: #f74c31;
}
.tips {
  font-size: 28rpx;
  text-align: center;
  padding: 50rpx;
  color: #ccc;
}
.tips image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
.tips image,.tips text {
  vertical-align: middle;
}

 PHP后台数据

public function moviesList(Request $request){
        //判断 key 是否存在，存在则加一 increment，不存在则设置key 过期时间
        $id = $request->get('id');
        // 判断key是否存在
        $check = Cache::store('redis')->get('qps_'.$id);
        if ($check){
            // +1
            Cache::store('redis')->inc('qps_' . $id);
            $count = Cache::store('redis')->get('qps_' . $id);
            // 限制每分钟10次
            if($count > 2){
                return fail('当前id请求频率过高');
            }
        } else {
            Cache::store('redis')->set('qps_' . $id, $id,60);//初始值1
        }
        $size  = $request->get('pageSize');//接受每条查询的条数
        if (is_numeric($id) && $id == 0){
            return false;
        }
        $result = \app\home\model\Movies::movies($id,$size);
        return success($result);
    }

model

 public static function movies($id,$size){
        return self::where('type_id',$id)->paginate($size);
    }