微信小程序之下拉刷新上拉加载

今天给大家介绍一下列表的下拉刷新和下拉加载，对于一个很长的列表，有的时候可能跳转过页面但是还没有加载完内容，这时候下拉一下刷新页面就可以了，在很多网页我们应该都见过吧，我们最常用的qq微信都有。我们要做的一款小程序就有列表，所以在这里跟大家分享一下。

首先要新建一个list文件

在list.wxml代码

<!--index.wxml-->
<view class="weui-cells weui-cells_after-title">
  <view class="page__bd">
        <view class="weui-panel weui-panel_access">
            <view class="weui-panel__hd">
              学生列表
              <button class="weui-btn mini-btn" type="default" size="mini" bindtap='add'>添加</button>
            </view>
            <view class="weui-panel__bd" wx:for="{{list}}">
             <!-- <block wx:for="{{list}}">  -->
                <navigator url="../headimg/headimg?id={{item.id}}&no={{item.no}}&name={{item.name}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                        <image class="weui-media-box__thumb" src="{{item.path}}" />
                    </view>
                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                        <view class="weui-media-box__title">{{item.no}}</view>
                        <view class="weui-media-box__desc">{{item.name}} {{item.sex}} {{item.age}}</view>
                    </view>
                </navigator>
                 <!-- </block>  -->
            </view>
        </view>
    </view>
</view>

list.js

//index.js
//获取应用实例
const app = getApp()
var page = 1;
var isfinish = false;//加载完毕

function loadmore(that) {
  if (isfinish) return;
  wx.showLoading({
    title: '正在加载中',
  })
  wx.request({
    url: "http://xxx/server/index.php/home/index/select",
    data: {
      page: page,
    },
    success: (res) => {
      // wx.hideLoading();
      // that.setData({list:res.data.data});
      // page++;
      console.log(res.data.data);
      var data = res.data.data;
      wx.hideLoading();
      if (data.length > 0) {
        var list = that.data.list;

        for (var i = 0; i < data.length; i++) {
          list.push(data[i]);
        }
        that.setData({ list: list });
        page++;
      } else {
        isfinish = true;
      }
      wx.stopPullDownRefresh()
    }
  })
}
Page({
  data: {
    list: [],
  },
  add: function (e) {
    wx.navigateTo({
      url: '../add/add',
    })
  },
  onPullDownRefresh: function () {
    page = 1;
    isfinish = false;
    this.setData({ list: [] });
    loadmore(this);
  },
  onReachBottom: function () {
    var that = this;
    loadmore(that);

  },
  onPageScroll: function () {
    // Do something when page scroll
  },
  onLoad: function () {
    page = 1;
    wx.request({
      url: 'http://xxx/server/index.php/home/index/select',
      data: {

      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        // var student = res.data.student;
        // console.log(res.data);
        this.setData({ list: res.data.data });
        wx.setStorageSync('list', res.data.data)
      }
    })
  },
  onshow: function () {
    loadmore(this)
  }
})

php后台代码

// 显示全部学生信息
    public function select(){
      $pagesize=10;
      $where = array();
      if(!empty($condition)){
      	$where['a.no|a.name'] = $condition;
      }
      $data = M('student')
              ->alias('a')
              ->join('__IMAGE__ b ON a.no=b.no','LEFT')
              ->field('a.id,a.name,a.no,a.sex,a.age,a.path,b.base64')
              ->where($where)
              ->page($_GET['page'],$pagesize)
              ->select();
      foreach ($data as &$row) {
        $path = $row['path'];
        if(!empty($path)){
          if(!file_exists($path)){
            $dir = dirname($path);
            mkdir($dir,0777,true);
            file_put_contents($path, base64_decode($row['base64']));
          }
          $row['path'] = self::HOST . ltrim($path,'.');
        }
        unset($row['base64']);
      }
      $this->ajaxReturn(array('data'=>$data));
    }

这样列表的上拉加载，下拉刷新就完成了，大家如果有这方面的学习，不妨参考下，大家也可以向我提问，我们互相学习。