小程序滚动加载

wxml静态页面

    <view class='box'>

      <scroll-view scroll-y='true' style="height:{{height}}rpx" bindscrolltolower='lower'>

        <view class="list"  wx:for="{{res}}" wx:for-item="item" data-id="{{index}}" wx:key="index" style="height:{{(height/5)-1}}rpx;">

          <view class="p1">{{item.time}}</view>

          <view class="p2">{{item.record}}</view>

        </view>

      </scroll-view>

    </view>

wxss样式部分

.box .list{

  padding: 10rpx 0 0 0;

  box-sizing: border-box;

  text-align: left;

  border-bottom: 1rpx solid #e6e6e6;

}

.box .p1{

  color: #000000;

  font-size: 28rpx;

  line-height: 45rpx;

}

.box .p2{

  color: #737373;

  font-size: 24rpx;

  line-height: 65rpx;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}

js部分

data:{

    height: '',

    res: [

      {

        time:'2022/01/25',

        record:'可回收垃圾（6kg),厨余垃圾（10kg),其他垃圾（4kg），有害垃圾（1kg）'

      },

      {

        time:'2022/01/26',

        record:'可回收垃圾（6kg),厨余垃圾（10kg),其他垃圾（4kg），有害垃圾（1kg）'

      },

      {

        time:'2022/01/27',

        record:'可回收垃圾（6kg),厨余垃圾（10kg),其他垃圾（4kg），有害垃圾（1kg）'

      },              

    ]

},

  lower() {

    var result = this.data.res;

    var resArr = [];

    for (let i = 0; i < 10; i++) {

      resArr.push(i);

    };

    var cont = result.concat(resArr);

    console.log(resArr.length);

    if (cont.length >= 12) {

      wx.showToast({ //如果全部加载完成了也弹一个框

        title: '我也是有底线的',

        icon: 'success',

        duration: 1500

      });

      return false;

    } else {

      wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  

        title: '加载中',

        icon: 'loading',

      });

      setTimeout(() => {

        this.setData({

          res: cont

        });

        wx.hideLoading();

      }, 1500)

    }

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    wx.getSystemInfo({

      success: (res) => {

        this.setData({

          height: res.windowHeight

        })

      }

    })

  },