15|小程序页面下拉刷新和上拉分页事件

15|小程序页面下拉刷新和上拉分页事件

onPullDownRefresh(）：页面下拉刷新事件
onReachBottom()：上拉分页事件



必须在app.json设置enableDownRefresh=true，才会触发下拉刷新

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   list:[1,2,3,4,5,6,7,8,9]
  },

  /**9
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("监听用户下拉动作");
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
      console.log("onReachBottom")
      this.setData({
        list:[...this.data.list,...[10,11,12,13,14,15,16]]
      })
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

/* pages/list/list.wxss */
.item{
  width: 100%;
  height: 300rpx;
  border-bottom: 2rpx dotted gray;
  font-size: 50px;
  text-align: center;
  line-height: 300rpx;
}

<!--pages/list/list.wxml-->
<view class="list">
<view class="item" wx:for="{{list}}">{{item}}</view>

</view>