首页 > 代码库 > 真的炸了:让人头痛的小程序之『图片懒加载』终极解决方案
真的炸了:让人头痛的小程序之『图片懒加载』终极解决方案
转载:请写明原文链接及作者名 ‘小小小’
小程序真的会取代一切?QQ群:139128168 ← 点击加群
微信小程序中,懒加载特效让人头疼不已,因为小程序完全没法操作dom,所以位置的操作在小程序中,变得极其的难~~
先看特效:
我们将其拆分为如下几个步骤进行讲解~~
1)如何获取图片的位置高度
先看一张图:
通过上图可以知道,图片位置高度其实可以通过img.height + margin值算出。
js代码:
arrHight[i] = Math.floor(i/2)*(img.height + margin-bottom);
为何是Math.floor(i/2)呢,因为同一排两张图片高度一样,比如i=0和i=1,通过Math.floor得出值都为0,所以可以保证同一排的两张图片位置高度是同一个值。
2)替换默认图片
先看效果图片:
wxml代码:
<image src="{{arr[index] ? productArr[index].Image : ‘default.jpg‘}}"></image>
- 思路很明显,一开始arr[index]中都是false,所以默认都是default图片
- 但是随着往下移动,有些arr[index]的值变为true,所以替换默认图片
js代码:
for (var i = 0; i < this.data.productArr.length; i++) {
if (arrHight[i] < scrollTop) {
if (arr[i] == false) {
arr[i] = true;
}
}
}
思路相当清晰,无需多言~~
3)懒加载中渐显特效
先看效果:
wxss代码:
.product_image{
opacity: 0;
width: 100%;
height: 70%;
transition: opacity 1s linear 2s;
}
.loaded{
opacity: 1;
}
其实就是opacity的一个过渡动画而已,so easy~~
源码下载
『咻咻咻咻duang,是不是又忘了关注~~』
真的炸了:让人头痛的小程序之『图片懒加载』终极解决方案
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。