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

效果：

下拉刷新：

问题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;
}