微信小程序下拉刷新上拉加载

1.阻止事件冒泡
将里边盒子点击事件 bind:tap=" " 改成 catch:tap=" "

以下事件为非冒泡事件：submit、input、scroll 事件

2.下拉刷新

3.上拉加载 button

(1)wxml

<view wx:for="{{newses}}" class="list">{{item}}</view>
<button wx:if="{{hasMoreData}}" class="loading" loading>正在加载...</button>
<button wx:else class="loading">没有更多数据</button>

(2)wxss

.loading {
  font-size: 14px;
  color: #ccc;
  background-color: #fff;
}
.list {
  line-height: 120rpx;
}

(3)js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    sources:['1','2','3','4','5','6','7','8','9','10','11','12'],
    newses:[],
    hasMoreData:true
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    setTimeout(function(){
      var sources = that.data.sources;
      var newses = [];
      for(var index=0;index<10;index++){
        var news = sources[index];
        newses.push(news)
      }
      that.setData({
        newses:newses
      })
    },1000)
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;
    setTimeout(function(){
      var newses = that.data.newses;
      var newsesLength = newses.length;
      var sources = that.data.sources;
      var sourcesLength = sources.length;
      if(newsesLength === sourcesLength){
        that.setData({
          hasMoreData:false
        });
        return;
      };
      var start = newsesLength;
      var end = Math.min(start + 9,sourcesLength - 1);
      for(var index = start;index <= end;index ++){
        var news = sources[index];
        newses.push(news)
      }
      that.setData({
        newses:newses
      })
    },1000)
  }
})

4.引用组件