自用懒加载(其实效果并不是很好),自带的懒加载还好(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}) },
扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄
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}) },

更多精彩