微信小程序懒加载数据（动画效果显示）

来源：https://blog.csdn.net/qq_43764578/article/details/107483349

 

 

 

.wxml

<view class="index">
  <view wx:for="{{detail}}" wx:key="index" class="center {{item.hide?\'animation\':\'\'}}" id="curr{{index}}">
    <view wx:if="{{item.hide}}">
      {{item.name}}{{index}}
    </view>
  </view>
</view>

 

.wxss

.index{
  width: 100%;
  float: left;
  min-height: 100vh;
  background-color: #ffcccc;
  padding-bottom: 30rpx;
}
.center{
  width: 80%;
  margin: 30rpx 10% 0;
  float: left;
  font-size: 26rpx;
  height: 200rpx;
  background-color: #fff;
}
.animation{
  animation:center 1s;
}
@keyframes center{
  from {
    transform:scale(0.3);
  }
  to {
    transform:scale(1);
  }
}

 

.js

Page({
  data: {
    detail: [{ name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }, { name: \'测试\' }],
    windowHeight: \'\',
  },
  onLoad: function (opstion) {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight
        })
      },
    })
    for (let i = 0; i < that.data.detail.length; i++) {
      wx.createSelectorQuery().select(\'#curr\' + i).boundingClientRect(function (rect) {
        that.data.detail[i].height = rect.top
        if (that.data.detail[i].height <= that.data.windowHeight) {
          that.data.detail[i].hide = true
        } else {
          that.data.detail[i].hide = false
        }
        if (i == (that.data.detail.length - 1)) {
          that.setData({
            detail: that.data.detail
          })
        }
      }).exec()
    }
  },
  onPageScroll: function (e) {
    let that = this
    if (that.data.detail[that.data.detail.length - 1].hide) {
      return false
    }
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight + e.scrollTop
        })
      },
    })
    for (let i = 0; i < that.data.detail.length; i++) {
      if (that.data.detail[i].height <= that.data.windowHeight) {
        that.data.detail[i].hide = true
      } else {
        that.data.detail[i].hide = that.data.detail[i].hide ? true : false
      }
    }
    that.setData({
      detail: that.data.detail
    })
  },
})