小程序笔记 -- 下拉刷新与触底加载下一页

下拉与触底函数是每一个页面都有的事件函数, 同页面生命周期函数类似 : 监听并执行

onPullDownRefresh 判断用户在最顶部下拉时触发, 如果下拉后再拉回去则不触发

onReachBottom 判断用户到达最底部时触发

如果当面页面的内容, 不够多时可能不触发

一般需要在wxss中设置页面的高度为100%

page{
    height: 100%;
}

下拉刷新的作用是刷新当前页面, 可能是由于网络原因卡慢等, 需要重新加载当前页面

触底加载的作用是加载下一页的内容, 一般是用户需要浏览更多的内容

不论是下拉还是触底刷新, 都是更新当前页面中的内容

如果后端分好页以后, 只需要根据当前页面, 发送不同数据到后端取得需要数据, 再渲染

原理就是这样, 如下实现:

说明: currentObject是封装好的分页对象, 包含的是所需要的所有数据(一共多少页, 当前是多少页, 数据库记录等等)

arr是currentObject中的集合数据, 即目标数据(数据库记录)

后台是根据你发送的页码, 去查询得到该页码的数据, 所以关键是正确发送页码

Page({
  data: {
    currentObject: {},    // 表示当前分页的对象
    arr : [],             // 表示当前分页的对象中, 数据库中的记录集合
  },

  // 下拉刷新当前页
  onPullDownRefresh: function (e) {
    console.log("执行下拉刷新当前页的内容");
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    var that = this;
    wx.request({
      url: 'http://127.0.0.1:4444/getXxx',        // 请求数据的url
      data : {
        currentPage: that.data.currentObject.currentPage,  // 先取出当前页, 表示将要获取当前这个页面的内容
        item : 6
      },
      success: function (res) {
        that.setData({
          currentObject: res.data,    // 分页对象
          arr: res.data.songList      // 分页对象的集合属性, 代表数据库记录
        });

        // 隐藏导航上的加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      }
    })
  },

  // 触底加载下一页
  onReachBottom: function () {
    console.log("触底加载下一页的内容");
    // 显示一个加载图标
    wx.showToast({
      title: '正在加载中...',
      duration : 15000,          // 提示消息的最大持续时间 15s
      icon: 'loading'
    });
    var f = function () {
      wx.hideToast();
    };
    var that = this;
    wx.request({
      url: 'http://127.0.0.1:4444/getXxx',
      data: {
        currentPage: that.data.currentObject.currentPage + 1,  // 下一页
        item: 6
      },
      success: function (res) {
        that.setData({
          currentObject: res.data,    // 分页对象
          arr : res.data.songList     // 分页对象的集合属性, 代表数据库记录
        });
      
        // 隐藏加载提示
        setTimeout(f, 500);          // 加载成功后, 我让它0.5s后再隐藏
      }
    })
  },
})

其它注意事项:

app.json中

"window": {
"backgroundTextStyle": "",             // 这个值不能是light, 否则下拉动作效果不明显
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},

当前页面的json文件中, 比如index.json中, 打开下拉刷新

{
"enablePullDownRefresh": true,       // 这个值默认是false, 将其改为true, 否则无法下拉
"navigationBarTitleText": "index页面"
}

还有那种分页, 可以点击下一页, 上一页, 转到第xx页, 这种分页在web中是非常常见的

小程序中也可以做, 后端不用变, 只需要前端更改布局, 显示出上一页, 下一页, 第xx页, 跳转到第xx页... 等链接

然后更换data的内容, 如下:

Page({
    data: {
       songObj: {},          // 分页查询到的数据对象
       songs: [],            // 数据对象中 的 数据库记录
       indexArr: [],         // 数据对象中 的 导航链接
       inputData: '',        // 输入框中, 用户输入的指定的跳转页
    },
    /***********这里我初始加载第一页, 每页6条数据库记录********** */
    /***********其实我是可随意加载第几页, 随意设置每页显示多少条记录***********/
    onLoad: function(e) {
      wx.setStorageSync("src", 0);
      var _this = this;
      wx.request({
        url: app.globalData.preFixedUrl + 'getPageData',    // 请求开发者服务器
        data: {        // 开发者服务器根据如下此参数分页 
          currentPage: 1,
          item: 6
        },
        success: function(e) {    // e.data是分页查询到的数据对象
                                  // e.data.end是数据对象中的一个数据, 表示导航链接的结束
                                  // e.data.start是数据对象中的一个数据, 表示导航链接的开始  
          var arr = new Array(e.data.end - e.data.start + 1);
          var data = e.data.songs;
          _this.setData({
            songs: e.data.songs,
            songObj: e.data,
            indexArr: arr
         });
       }
    })
},

小程序笔记 -- 下拉刷新与触底加载下一页

猜你喜欢