微信小程序上拉刷新和下拉加载2种方法实现，onPullDownRefresh，scroll-view使用

这篇文章，直接开怼，代码有详细注释

onPullDownRefresh实现下拉刷新 

一、获取数据

  //product2获取数据  loadProduct2: function () {    var that = this;    wx.request(OBJECT)//发起网络请求。使用前请先阅读说明。  },

二、下拉调用

  //下拉刷新  onPullDownRefresh:function(){    console.log("刷新");     wx.setNavigationBarTitle({      title: '刷新中……'    })//动态设置当前页面的标题。    wx.showNavigationBarLoading();//在当前页面显示导航条加载动画。    this.loadProduct2();//重新加载产品信息    wx.hideNavigationBarLoading();//隐藏导航条加载动画。    wx.stopPullDownRefresh();//停止当前页面下拉刷新。    console.log("关闭");    wx.setNavigationBarTitle({      title: '寸草心+'    })//动态设置当前页面的标题。      }  

wx.startPullDownRefresh(OBJECT)

开始我一直以为用这个实现的，可是我错了，这个只是一个方法，可以通过这个方法（函数）去实现，在这个坑里埋了好久，大家在使用的时候请避开这个坑！

三、XXX.json开启下拉刷新

{   "enablePullDownRefresh": true}

这个json文件，不是app.json文件，是你当前的json文件；

其他页面的json文件只能设置【window】

scroll-view 实现上拉刷新和下拉加载

注：转自---昵称：苏桃子~http://www.cnblogs.com/simba-lkj/p/6274232.html

橙子UI：添加标注，让小白更易懂

一、XXX.wxml文件

<!--pages/ceshi/ceshi.wxml--><view class="container" style="padding:0rpx">  <!--垂直滚动，这里必须设置高度-->  <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">    <view class="item" wx:for="{{list}}">      <image class="img" src="{{item.pic_url}}"></image>      <view class="text">        <text class="title">{{item.name}}</text>        <text class="description">{{item.short_description}}</text>      </view>    </view>  </scroll-view>  <view class="body-view">    <loading hidden="{{hidden}}" bindchange="loadingChange">      加载中...    </loading>  </view></view>

二、XXX.wxss文件

/* pages/ceshi/ceshi.wxss */.userinfo {   display: flex;   flex-direction: column;    align-items: center;  }   .userinfo-avatar {   width: 128rpx;   height: 128rpx;  margin: 20rpx;   border-radius: 50%; }  .userinfo-nickname {  color: #aaa; } .usermotto {   margin-top: 200px;}  /**/ scroll-view {   width: 100%; } .item {   width: 90%;  height: 300rpx;   margin: 20rpx auto;   background: brown;   overflow: hidden; }  .item .img {  width: 430rpx;   margin-right: 20rpx;   float: left; } .title {  font-size: 30rpx;   display: block;   margin: 30rpx auto; }  .description {   font-size: 26rpx;   line-height: 15rpx; }

三、XXX.js文件

// pages/ceshi/ceshi.jsvar url = "http://www.imooc.com/course/ajaxlist";var page = 0;var page_size = 5;var sort = "last";var is_easy = 0;var lange_id = 0;var pos_id = 0;var unlearn = 0;// 请求数据var loadMore = function (that) {  that.setData({    hidden: false  });  wx.request({    url: url,    data: {      page: page,      page_size: page_size,      sort: sort,      is_easy: is_easy,      lange_id: lange_id,      pos_id: pos_id,      unlearn: unlearn    },    success: function (res) {            var list = that.data.list;      console.info("list数据长度：" + list.length);      for (var i = 0; i < res.data.list.length; i++) {        list.push(res.data.list[i]);      }      that.setData({        list: list      });      console.info("之前page==：" + page);      page++;      console.info("目前page==：" + page);      that.setData({        hidden: true      });    }  });}Page({  /**   * 页面的初始数据   */  data: {    hidden: true,    list: [],    scrollTop: 0,    scrollHeight: 0  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    //   这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值    var that = this;     wx.getSystemInfo({      success: function (res) {        that.setData({          scrollHeight: res.windowHeight         });        console.log("设备高度scrollHeight==" + res.windowHeight);              }           });        loadMore(that);      },  //页面滑动到底部  bindDownLoad: function () {    var that = this;    loadMore(that);    console.log("lower");  },  scroll: function (event) {    //该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。    this.setData({      scrollTop: event.detail.scrollTop    });    console.log("滚动时触发scrollTop==" + event.detail.scrollTop);  },  topLoad: function (event) {    //   该方法绑定了页面滑动到顶部的事件，然后做上拉刷新    page = 0;    this.setData({      list: [],      scrollTop: 0    });    loadMore(this);    console.log("重新加载");  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {  }})

谢谢作者，码字确实辛苦！敬上！