zoukankan      html  css  js  c++  java
  • 微信小程序实现分页加载数据

    <block wx:for="{{dataArray}}" wx:for-item="list" wx:key="data">
        <block wx:for="{{list}}" wx:key="list">
            <view>内容</view>
        </block>
    </block>
    onLoad: function(){
      this.getList();
    },
      // 页面上拉触底事件的处理函数 
      onReachBottom: function() {
       this.next()
     },
    //请求第一页数据
    getList: function() {
        var that = this;
        var page = 0
        that.setData({
              dataArray: []
        })
        app.util.request({
              'url': '*****',
              'data': {
                page: 0, 
              },
              success: function(res) {
                var list= res.data.data
                var totalDataCount = list.length;  
                that.setData({
                  ["dataArray["+page+"]"]: list,   
                  page: page,     
                  totalDataCount: totalDataCount   
                })
              }
            })
          },
        })
      },    
    //请求下一页数据
    next : function(){
      var page = that.data.page;
       page += 1;
       app.util.request({
         'url': '*****',
         'data': {
           page: page,
         },
         success: function(res) {
           var list = res.data.data;
           // 计算当前共加载了多少条数据,来证明这种方式可以加载更多数据
           var totalDataCount = that.data.totalDataCount;
           totalDataCount = totalDataCount + list.length;
           that.setData({
             ["dataArray[" + page + "]"]: list,
             page: page,
             totalDataCount: totalDataCount
           })
         }
       })  
    }

    原博文解释更详细一些,以上是根据第二种方法实现的:https://www.jianshu.com/p/066c062845e9

  • 相关阅读:
    canvas的基本用法
    h5新增属性
    jquery中遍历
    git版本控制器
    bootstrap-datetimepicker时间插件
    layer.load的使用
    ajax请求json中的数据
    h5中input的request属性提示文字字段
    layUI
    v-show v-if 的使用
  • 原文地址:https://www.cnblogs.com/yun101/p/12922030.html
Copyright © 2011-2022 走看看