6、微信小程序上加载--后台分页及下拉刷新

 一、上拉加载

<scroll-view class="huadong" scroll-y show-scrollbar="true" bindscrolltolower="huadong">
      <view bindtap="go_mives"  data-id="{{item.id}}" class="one" wx:for="{{cineplex}}">
        <view class="cineplex_son">
          {{item.cnpname}}
        </view>
      </view>
    </scroll-view>

.huadong{
  width: 100%;
  height:800rpx;
}
.one{
  width: 100%;
  height: 100px;
  border-radius: 5rpx;
  border: 1rpx solid red;
  margin-top: 3px;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    cineplex: []
    page: 1,
    last_page:0,
  },
  //第一次加载影城信息
  cineplex(){
    let that =this;
    wx.request({
      url: 'http://0630.com/api/cineplex_list',
      data: {
        page: 1,//传递页数第一页
      },
      success: (res) => {
        //保存数据
        this.setData({
          cineplex: res.data.data[0],
          last_page:res.data.data.last_page,
        })
      }
    })
  },
  //触底加载影城信息
  chudi_cineplex(){
    let page = this.data.page +1;
    let last_page = this.data.last_page;
    console.log(last_page)
    if(page > last_page){
      wx.showToast({
        title: '到底了',
      })
      return
    }
    wx.request({
      url: 'http://0630.com/api/cineplex_list',
      data: {
        page: page,
      },
      success: (res) => {
        let cinelpexs = this.data.cineplex
        let cineplex = [...cinelpexs, ...res.data.data[0]]
        this.setData({
          cineplex,
          page: page
        })
        
      }
    })
  },
  

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.movies();
    this.cineplex()
  },

 /**
        * 页面上拉触底事件的处理函数
        */
  onReachBottom: function () {
    this.chudi_cineplex()
  },
    
 

后台处理分页

//影城信息 下拉刷新
    public function cineplex_list(Request $request)
    {
        $page = $request->input('page'); //要查询的页数
        //偏移量
        $pian = 6;
        //分页查询数据
        $data = Cineplex::paginate($pian)->toArray();
        if ($page > $data['last_page']) return ['code' => 201, 'msg' => '成功', 'data' => null];
        //因为分页查询到的数据里面有一个参数是  last_page  是计算了数据库中的总页数
        return ['code' => 200, 'msg' => '成功', 'data' => [$data['data'], 'last_page' => $data['last_page']]];
    }

二、下拉刷新

        下拉刷新的理念就是执行下拉动作  重新请求数据接口，数据按照时间倒序（新的在上面）。

1、开启页面下拉加载

在app.json或当前页json文件中开启上拉刷新

{
  "enablePullDownRefresh":true,   //开启上拉刷新
  "usingComponents": {}
}

2、onPullDownRefresh函数

        写入请求

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function (e) {
    wx.showLoading({
      title: '加载成功',
      mask: true,
    })
    setTimeout(function () {
      wx.hideLoading()
    }, 500)
    this.list()
  },