小程序-下拉刷新+上拉加載更多

效果：

下拉刷新：

問題1：看不到三個點，這個問題通常是背景和那三個點的顏色沒設置對造成的

//.json
{
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",
"backgroundColor":"#eee"
}

上拉加載更多

設置scroll-view的高度大於屏幕的高度

以iphone6爲例：height>=1300rpx;//總高度1334rpxl，減去狀態欄的高度

代碼：

<scroll-view class='container' scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
  <view class='view-item'></view>
</scroll-view>

 

// pages/test-three/test-three.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },
  //模擬加載數據
  onScrollLower: function() {
    console.log('onScrollLower')
    wx.showNavigationBarLoading();
    setTimeout(() => {
      wx.hideNavigationBarLoading();
      wx.stopPullDownRefresh();
    }, 1200);
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {
    // this.onScrollLower();
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function() {
    // wx.startPullDownRefresh({

    // });
  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function() {
    console.log('onPullDownRefresh')
    this.onScrollLower();
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function() {

  }
})

// test-three.json

{
"enablePullDownRefresh": true,"backgroundTextStyle": "dark",
"backgroundColor":"#eee"
}

 

/* pages/test-three/test-three.wxss */
.container{
  height: 1200rpx;
  background: red;
}
.view-item{
  height: 50rpx;
  background: blue;
}