zoukankan      html  css  js  c++  java
  • 自用懒加载(其实效果并不是很好),自带的懒加载还好(2)(优化)

    对onPageScroll中的setData赋值次数进行节流
    https://www.jianshu.com/p/b835527a792e(没看完)
    onPageScroll: function (e) {
    console.log(e);
    let arrHeight = this.data.arrHeight;
    let imgArr = this.data.imgArr;
    let screenH = this.data.screenH;
    let n=this.data.n;
    let chen=0;
    if (!this.data.imgshownext){
    return;
    }
    for (let i = 0; i < arrHeight.length; i++) {
    // 方案一
    // 这里暂时效果不是很好,所以可以把距离改改
    // if (arrHeight[i]<e.scrollTop+screenH ){
    // imgArr[i]=true;
    // }
    // 方案二
    // 距离稍微早一点释放,距离底部100就释放
    // 效果依然不好
    if (arrHeight[i]<e.scrollTop+screenH+100){
    imgArr[i]=true;
    chen++;
    }
    }
    console.log(imgArr)
    if (chen>n){
    console.log(chen)
    this.setData({
    imgArr,
    imgshownext: false,
    n:chen
    })
    }

    setTimeout(()=>{
    this.setData({
    imgshownext: true
    })

    },500)
    },
     
     
    init: function (itemHeight){
    let imgArr = this.data.imgArr;
    let arrHeight = this.data.arrHeight;
    let index = parseFloat(this.data.screenH/itemHeight);
    let n=0;
    // 先展示屏幕为滚动时的展示图片,这里是两列,所以*2
    for(let i=0;i<index*2;i++){
    imgArr[i]=true;
    n++;
    }
    // 5为高度是的间距,94为初始距离顶部的距离
    for (let i = 0; i < imgArr.length; i++) {
    arrHeight[i] = Math.floor(i / 2) * (itemHeight+5)+94
    }
    console.log(imgArr)
    console.log(arrHeight)
    this.setData({ imgArr, arrHeight, n})
    },
  • 相关阅读:
    mdadm
    RAID磁盘阵列学习笔记
    内存究竟有多快?
    fping
    Intel® RAID Software User’s Guide
    为什么寄存器比内存快?
    OC-Category
    OC-id、构造方法
    OC- @property @synthesize
    OC-点语法
  • 原文地址:https://www.cnblogs.com/dianzan/p/10775810.html
Copyright © 2011-2022 走看看