小程序页面分批次加载（模拟懒加载）

有些情况，例如在详情页，可能涉及的接口个数比较多，因为详情一般数据量比较庞大，如果部分开，一个接口请求，会导致请求时间比较长，用户体验会很差，所以此时就可把这个大接口分开，当页面滚动到某个楼层时再请求后边楼层的数据。

1.代码

1.wxml

<view style="width:100%;height:200rpx;">1</view>

<view style="width:100%;height:500rpx;">2</view>

<view style="width:100%;height:300rpx;">3</view>

<view class='wz1'></view>

<view style="width:100%;height:700rpx;">4</view>

<view class='wz2'></view>

<view style="width:100%;height:100rpx;">5</view>

<view class='wz3'></view>

<view style="width:100%;height:600rpx;">6</view>

<view style="width:100%;height:700rpx;">7</view>

1.2js

var that;
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    that = this;

    
    // 判断是否加载过了(分栋，评论，热门楼盘)
    that.data.wz1Flag = true;
    that.data.wz1Top = 0;
    that.data.wz2Flag = true;
    that.data.wz2Top = 0;
    that.data.wz3Flag = true;
    that.data.wz3Top = 0;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  // 监听页面滚动
  onPageScroll: function(e) {

    that.getEleLocation();

    var scrollTop = e.scrollTop;

    if (that.data.wz1Flag && (that.data.wz1Top != 0) && (scrollTop>=that.data.wz1Top)) {

      console.log('加载位置1')
      //请求一次开关关闭
      that.data.wz1Flag = false;
    }

    if (that.data.wz2Flag && (that.data.wz2Top != 0) && (scrollTop>=that.data.wz2Top)) {

      console.log('加载位置2')
      //请求一次开关关闭
      that.data.wz2Flag = false;
    }

    if (that.data.wz3Flag && (that.data.wz3Top != 0) && (scrollTop>=that.data.wz3Top)) {

      // 同区属热门楼盘
      console.log('加载位置3')
      //请求一次开关关闭
      that.data.wz3Flag = false;
    }
  },
  // 获取位置
  getEleLocation() {
    wx.createSelectorQuery().selectAll('.wz1').boundingClientRect(function(rect) {
      that.data.wz1Top = rect[0].top;
    }).exec();
    wx.createSelectorQuery().selectAll('.wz2').boundingClientRect(function(rect) {
      that.data.wz2Top = rect[0].top;
    }).exec();
    wx.createSelectorQuery().selectAll('.wz3').boundingClientRect(function(rect) {
      that.data.wz3Top = rect[0].top;
    }).exec();
  },
})

1.3效果

2.说明

2.1思路：在页面的某个楼层写一个view标签并绑定一个class名字，在滚动事件中监听滚动的距离顶部的距离和这个view标签距离顶部的高度进行对比，如果滚动距离大于这个view标签距离顶部的距离，则请求接口加载数据。当然了，只是展示型数据，加一次就行了，所以再用一个开关控制一下保证只加载一次就好了。

2.2在某些页面中还存在展开和收起按钮，在点击该按钮时，元素距离顶部的高度会发生变化，此时需要重新获取高度，否则就不对了，所以最好把获取高度的写成一个方法，在展开收起时重新计算高度。

2..3 获取高度有两种位置书写：①写在数据渲染完成一次，在点击展开收起一次；②直接写在滚动函数中，只要发生滚动就计算一次。建议用①的写法，不用每次滚动都获取。

小程序页面分批次加载（模拟懒加载）

猜你喜欢