微信小程序—两种方式实现上拉加载与下拉刷新

在列表数据的时候，一般都会有分页，因为如果一次性都加载出来的话，会造成卡顿的现象，浪费用户的流量，所以就会有下拉刷新，上拉加载。这里我们介绍两种实现微信小程序的下拉刷新，上拉加载的实现方式：

一、第一种实现方式：

1.官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161107

通过scroll-view（可滚动视图区域）的属性来实现的，bindscrolltoupper（滚动到顶部/左边，会触发 scrolltoupper 事件），bindscrolltolower（滚动到底部/右边，会触发 scrolltolower 事件），bindscroll（）滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

2.效果图如下，

3.index.js中：

//index.js
//获取应用实例
const app = getApp();
const parentUrl = "http://apicloud.mob.com/v1/cook/menu/search?name=%E7%BA%A2%E7%83%A7%E8%82%89&cid=0010001007&key=17113fceca309&size=20&page=";
var curPage = 0;
var ctgTitles;
var thumbnail;
var isRefresh = true;
Page({
  data: {
    refresh_h: false,//刷新
    load_h: true,//加载
    line_h: true,//底线
    scrollTop: 0,
  },

  onLoad: function () {
    //微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
    var that = this;
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
    //设置第一次数据
    GetList(that);
  },

  //页面滑动到顶部(下拉刷新)
  topLoad: function (e) {
    isRefresh = true;
    curPage = 0;
    var that = this;
    that.setData({
      list: [],
      scrollTop: 0
    })
    GetList(that)
  },
  //页面滑动到底部(上拉加载)
  downLoad: function (e) {
    var that = this;
    isRefresh = false;
    GetList(that)
  },
  //设置竖向滚动条位置
  scroll: function (event) {
    this.setData({
      scrollTop: event.detail.scrollTop
    });
    console.log(event.detail.scrollTop);
  },
})


var GetList = function (that) {
  if (isRefresh == true) {
    //下拉刷新
    that.setData({
      refresh_h: false,
      load_h: true,
    });
  } else {
    //上拉加载
    that.setData({
      refresh_h: true,
      load_h: false,
    });
  }

  // 请求网络请求
  wx.request({
    url: parentUrl + curPage,
    data: {
      curPage: curPage,
      ctgTitles: ctgTitles,
      thumbnail: thumbnail,
    },
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: {
      'content-type': 'application/json'
    },// 设置请求的 header
    success: function (res) {
      console.log(that.data.list);
      var list;
      if (res.statusCode == 200) {
        if (that.data.list == undefined) {
          list = [];
        } else {
          list = that.data.list;
        }
        for (var i = 0; i < res.data.result.list.length; i++) {
          list.push(res.data.result.list[i]);
        }
        that.setData({
          list: list,
        });
        curPage++;
        //这里判断了加载的页数大于10页，就显示底线
        if (curPage > 10){
          that.setData({
            refresh_h: true,
            load_h: true,
            line_h: false,
          });
        }else{
          that.setData({
            refresh_h: true,
            load_h: true,
            line_h: true,
          });
        }
      } else {

      }
    },
    fail: function (res) {

    },
    complete: function () {
      // complete
    }
  })
}

4.index.wxml中：

<loading hidden='{{refresh_h}}' bindchange="loadingChange">
  刷新中...
loading>
<scroll-view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" bindscroll="scroll" scroll-y="true" scroll-top="{{scrollTop}}" bindscrolltoupper="topLoad" bindscrolltolower="downLoad">
  <block wx:for="{{list}}" wx:key="listKey">
    <view class="myView">
      <image class="image" src="{{item.thumbnail}}">image>
      <view class="title">{{item.ctgTitles}}view>
      <view class="body">{{item.name}}view>
    view>
  block>
scroll-view>
<view class="line" hidden="{{line_h}}">--别太放肆，我是有底线的--view>
<loading hidden="{{load_h}}" bindchange="loadingChange">
  加载中...
loading>

5.index.wxss中：

.image {
  width: 200rpx;
  height: 200rpx;
  float: left;
}

.myView {
  width: 100%;
  float: left;
  margin: 10px;
}

.title {
  font-size: 12px;
  padding-left: 10px;
  padding-top: 15px;
  float: left;
}

.body {
  font-size: 10px;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
}

.line {
  font-size: 12px;
  width: 100%;
  height: 50rpx;
  text-align: center;
}

二、第二种实现方式：

1.官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161107

2.效果图如下：

3.second.js中：

// pages/second/second.js
const parentUrl = "http://apicloud.mob.com/v1/cook/menu/search?name=%E7%BA%A2%E7%83%A7%E8%82%89&cid=0010001007&key=17113fceca309&size=20&page=";
var curPage = 0;
var ctgTitles;
var thumbnail;
var isFirst = true;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    load_h: true,//加载
    line_h: true,//底线
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //设置第一次数据
    wx.startPullDownRefresh;
    var that = this;
    GetList(that);
  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("监听用户下拉动作");
    var that = this;
    curPage = 0;
    isFirst = true;
    that.setData({
      list: [],
    })
    GetList(that);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("监听用户上拉拉动作");
    var that = this;
    GetList(that);
  },

})


var GetList = function (that) {
  //设置加载提示窗是否显示
  if (isFirst == true){
    //第一次请求数据
    that.setData({
      load_h: true,
    });
    isFirst = false;
  }else{
    that.setData({
      load_h: false,
    });
  }

  // 请求网络请求
  wx.request({
    url: parentUrl + curPage,
    data: {
      curPage: curPage,
      ctgTitles: ctgTitles,
      thumbnail: thumbnail,
    },
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: {
      'content-type': 'application/json'
    },// 设置请求的 header
    success: function (res) {
      // console.log(that.data.list);
      var list;
      if (res.statusCode == 200) {
        //成功停止刷新
        wx.stopPullDownRefresh;
        if (that.data.list == undefined) {
          list = [];
        } else {
          list = that.data.list;
        }
        for (var i = 0; i < res.data.result.list.length; i++) {
          list.push(res.data.result.list[i]);
        }
        that.setData({
          list: list,
        });

        curPage++;
        //这里判断了加载的页数大于10页，就显示底线
        if (curPage > 10) {
          that.setData({
            load_h: true,
            line_h: false,
          });
        } else {
          that.setData({
            load_h: true,
            line_h: true,
          });
        }
      } else {

      }
    },
    fail: function (res) {
      //失败停止刷新
      wx.stopPullDownRefresh;
    },
    complete: function () {
      // complete
    }
  })
}

4.second.wxml中：

<view>
  <block wx:for="{{list}}" wx:key="listKey">
    <view class="myView">
      <image class="image" src="{{item.thumbnail}}">image>
      <view class="title">{{item.ctgTitles}}view>
      <view class="body">{{item.name}}view>
    view>
  block>
view>
<view class="line" hidden="{{line_h}}">--别太放肆，我是有底线的--view>
<loading hidden="{{load_h}}" bindchange="loadingChange">
  加载中...
loading>

5.second.wxss中：

.line {
  font-size: 12px;
  width: 100%;
  height: 50rpx;
  text-align: center;
}
.image{
  width: 95%;
  margin: 20rpx;
}

.title{
   font-size: 18px;
   margin-left: 20rpx;
}

.body{
   font-size: 16px;
   margin-left: 20rpx;
}

6.second.json中：

{
  "enablePullDownRefresh": true
}

7.demo地址：

http://download.csdn.net/download/afanbaby/10164329

本人菜鸟一个，有什么不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步！