微信小程式上拉重新整理和下拉載入2種方法實現，onPullDownRefresh，scroll-view使用

一、XXX.json開啟下拉重新整理

{
   "enablePullDownRefresh": true
}
 

二、XXX.js

onPullDownRefresh實現下拉重新整理 

手動下拉觸發onPullDownRefresh函式

  //product2獲取資料
  loadProduct2: function () {
    var that = this;
    wx.request(OBJECT)//發起網路請求。使用前請先閱讀說明。

  //下拉重新整理
  onPullDownRefresh:function(){
    console.log("重新整理"); 
 
    wx.setNavigationBarTitle({
      title: '重新整理中……'
    })//動態設定當前頁面的標題。
 
    wx.showNavigationBarLoading();//在當前頁面顯示導航條載入動畫。
 
    this.loadProduct2();//重新載入產品資訊

wx.startPullDownRefresh(Object object)

基礎庫 1.5.0 開始支援，低版本需做相容處理。

開始下拉重新整理。呼叫後觸發下拉重新整理動畫，效果與使用者手動下拉重新整理一致。

引數

Object object

示例程式碼

wx.startPullDownRefresh()

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.js
var 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 () {
  }
})
參考原文地址：https://blog.csdn.net/cplvfx/article/details/78355866