1.使用scroll-view實現下拉重新整理上拉載入

<scroll-view scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad"  bindscrolltoupper="refresh">
    <view class="item" wx:for="{{list}}">
      <image class="img" src="{{item.image}}"></image>
      <view
 
 class="text">
        <text class="title">{{item.title}}</text>
        <text class="description">{{item.pubdate}}"</text>
      </view>
    </view>
  </scroll-view>

先寫一個佈局 類似於android 的listview item的佈局 外邊用scroll-view包裹。item佈局樣式用css去實現。
scroll-view 熟悉介紹 參考官方文件

注意：使用豎向滾動時，需要給一個固定高度，通過 WXSS 設定 height。設定高度才能監聽到 滑動事件。
通過bindscrolltolower=”bindDownLoad” bindscrolltoupper=”refresh”實現下拉重新整理和上拉載入。

高度的獲得

onLoad: function () {
    //   這裡要非常注意，微信的scroll-view必須要設定高度才能監聽滾動事件，所以，需要在頁面的onLoad事件中給scroll-view的高度賦值
    var that = this;
    wx.getSystemInfo({
      success: function
 
 (res) {
        console.info(res.windowHeight);
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
  },

或者在onshow方法中

2.通過 onPullDownRefresh實現

注意：onPullDownRefresh和scroll-view不能同時使用

1. 需要在 .json 檔案中配置。(.json 檔案的格式和 app.json與具體頁面的.json檔案的區別，前文已經講過，有疑問的可以移步。) 如果配置在app.json檔案中，那麼整個程式都可以下拉重新整理。如果寫在具體頁面的.json檔案中，那麼就是對應的頁面，可以下拉重新整理。

具體頁面的.json檔案：

{
    "enablePullDownRefresh": true
}

app.json檔案:

"window": {
    "enablePullDownRefresh": true
  }

1. 在js檔案中添加回調函式

// 下拉重新整理回撥介面
    onPullDownRefresh: function () {
        // do somthing
    },

3 .上拉載入

同下拉重新整理一樣，小程式中也提供了用於上拉時回撥的介面。官方文件中並沒有很詳細的介紹，經測試發現，上拉回調的介面並不需要額外的配置（下拉時需要在 .json檔案中配置 “enablePullDownRefresh”: true），直接在頁面滑動到底部時就能拿到回撥。

1. 在js檔案中添加回調函式

// 上拉載入回撥介面
    onReachBottom: function () {
    },

var items = that.data.list.concat(res.data.books);
      that.setData({
        list: items,
      });

通過concat方法進行陣列的連線，實現上拉更多。

隱藏scroll-view滾動條

在相應的css檔案中加入一下程式碼

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}