TP5+微信小程序实现下拉数据加载功能

方案一：使用TP5limit进行偏移实现
微信小程序
wxml

//scroll-y 设置这个是让他纵向
//bindscrolltolower事件是监听 
<scroll-view scroll-y="{{ true }}" style="height:{{ height }}px" bindscrolltolower="getMore">
  <view class="courseItem" wx:for="{{ courseList }}" wx:key="*this"  bindtap='clickKecheng' id="{{ index }}" data-column="{{ item.cate_id }}">
    <view class="courseImg">
      <image mode='widthFix' src="{{ item.c_pic }}" />
    </view>
    <view class="courseInfo">
    <view class="title">{{ item.c_title) }}</view>
    <view class="desc">{{ item.c_desc) }}</view>
    <view class="author">讲师：{{ item.c_teacher }}</view>
    </view>
  </view>
</scroll-view>

js

/初始data数据
  data: {
    height:0,
    courseList : [],
    //偏移量
    offset : 0,
    //显示条数
    limit : 5
  },
 //执行scroll-view的监听事件  流加载
  getMore(){
  //这块是我自己封装的一个请求 想了解的可以看看es6 ^_^
    studyModel.getCourse({
    //参数
      offset:this.data.offset,
      limit:this.data.limit
    }).then(res=>{
      // 数据加载出来后关闭loading
      wx.hideLoading();
      var len = res.data.data.length;
      if(len <= 0){
         wx.showToast({
           title: '没有更多数据了',
           mask:false,
           icon:'none'
         })
      }
      this.setData({
      //concat是重点
        courseList: this.data.courseList.concat(res.data.data),
        offset: this.data.offset + res.data.data.length
      })
    })
  },
  // 计算可用面积高度
  height_study: function () {
    var that = this;
    wx.getSystemInfo({
      success(res) {
        console.log(res.windowHeight);
        that.setData({
          height: res.windowHeight
        })
      }
    })
  },
  //监听页面加载
  onLoad: function (options) {
    this.getMore();
    this.height_study();
  },

tp5控制器

//接收来自小程序的请求参数

        $offset = input('offset',0,'intval');
        $limit = input('limit',10,'intval');
        $courseRes = model('course')->limit($offset,$limit)->where('c_pic','neq','')->select();
        $data = ['data'=>$courseRes,'status'=>0];
        return json($data);

方案二：使用TP5page根据第几页显示多少条来展示(来源于一个好哥们的指导)
tp5控制器

public function get_course(){
        //当前页
        $current = input('current');
        //显示多少条
        $limit = input('limit');
        $courseRes = model('course')page($current,$limit)->select();
        return json(['code'=>200,'courseRes'=>$courseRes]);
    }

微信小程序js

getCourseMore(){
    var _this = this;
    // 获取下一页页码
    var nextpage = _this.data.nextpage;
    // 获取当前页页码
    var current = _this.data.current;
    //获取数据
    var courseList = _this.data.courseList;
    nextpage += _this.data.current;
    _this.setData({ nextpage: nextpage})
    wx.request({
      url:'http://edu.com/Api/v1/get_course',
      data:{
        current:nextpage,
        limit:5
      },
      header:{'content-type':'application/json'},
      success:function(res){
        if(res.data.code == 200){
          //声明空数组，用来接收加载的新数据
          var arr = _this.data.courseList;
          arr = arr.concat(res.data.courseRes);
          if (res.data.courseRes.length <= 0){
            wx.showToast({
              title: '没有更多了',
              icon:'none',
              duration:2000
            })
          }else{
            _this.setData({
              courseList:arr,
              page:Number(_this.data.page) + Number(1),
            })
          }
        }else{alert.showError('请求出错');}
      },
      fail:function(res){
        alert.showError('网络连接失败');
      },
      complete:function(){}
    })
  },