美文网首页
小程序上拉分页

小程序上拉分页

作者: 泪滴在琴上 | 来源:发表于2022-06-08 15:40 被阅读0次

    小程序为我们提供了上拉加载事件:onPullDownRefresh

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

    index.js

    Page({
      data: {
        // 文章数组
        articleList:[],
        //每页显示的行数:
        pagesize: 20,
        //页码(从1开始)
        page:1,// 文章页码
        //用于标识是否还有更多的状态
        state: 1,
        //用于数组的追加和暂存
        allProject: [],
      },
    /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        var self = this;
        self.getArticleList();
      },
        /**
       * 获取文章列表
       */
      getArticleList()
      {
        var self = this;
        // 请求后台接口获取文章列表
        wx.request({
          // 请求连接
          url: 'https://guanchao.site/index/xxxx/xxxxx,
          // 请求所需要的的参数
          data: {
            'page':self.data.page
          },
          success(result){
            var resData = result.data;
            var resLength = result.data.length;
            //如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
            if (resLength < 1)
            {
              self.setData({
                state: 0
              });
            }
            else
            {
              var state1 = 1;
              //如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
              if (resLength < self.pagesize)
              {
                var state1 = 0;
              }
              //循环将结果集追加到数组后面
              for (var i = 0; i < resLength; i++) {
                self.data.allProject.push(resData[i]);
              }
              self.setData({
                articleList: self.data.allProject,
                state: state1
              });
            }
            wx.hideLoading();
      
          }
        });
      },
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        var self = this;
        var state = self.data.state;
        if (state > 0){
            // wx.showLoading({
            //     title: '加载中...',
            // });
            self.data.page = self.data.page + 1;
            self.getArticleList()
            // wx.hideLoading();
        }
      },   
      
    });
    

    相关文章

      网友评论

          本文标题:小程序上拉分页

          本文链接:https://www.haomeiwen.com/subject/wfmumrtx.html