目录

标签： 微信小程序

微信小程序-上拉触底加载更多

效果

说明

微信小程序当用户滑动到页面的最底部时加载更多数据，可以通过微信小程序官方接口文档提供的 onReachBottom 事件函数来实现，可通过该事件监听用户是否已经拉到最底部，实现相应的界面显示效果、数据加载。

实现

在 Page 页面中的 js 文件中，加入以下代码：

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    wx.showLoading({
      title: '加载中...',
    })
    //模拟加载
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.hideLoading(); //完成刷新中的提示
    },1500);
  },

备注：加载数据写法应该如下示例

this.setData({dataList: this.data.dataList.concat(res.datas)});

在我测试中，在 setData 之外写，是无效的。

微信小程序-下拉刷新

效果

实现步骤

一、在 Page 页面中的 json 文件中新增配置：

"enablePullDownRefresh": true,

二、在 Page 页面中的 js 文件中增加代码：

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    wx.showLoading({
      title: '刷新中...',
    })
    //模拟加载
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
      wx.hideLoading(); //完成刷新中的提示
    },1500);
  },

以上即可实现微信小程序下拉刷新效果。