真的炸了:让人头痛的小程序之『图片懒加载』终极解决方案
2016-12-15 05:37
267 查看
转载:请写明原文链接及作者名 ‘小小小’
小程序真的会取代一切?QQ群:139128168 ← 点击加群
微信小程序中,懒加载特效让人头疼不已,因为小程序完全没法操作dom,所以位置的操作在小程序中,变得极其的难~~
先看特效:
我们将其拆分为如下几个步骤进行讲解~~
通过上图可以知道,图片位置高度其实可以通过img.height + margin值算出。
js代码:
为何是Math.floor(i/2)呢,因为同一排两张图片高度一样,比如i=0和i=1,通过Math.floor得出值都为0,所以可以保证同一排的两张图片位置高度是同一个值。
wxml代码:
思路很明显,一开始arr[index]中都是false,所以默认都是default图片
但是随着往下移动,有些arr[index]的值变为true,所以替换默认图片
js代码:
思路相当清晰,无需多言~~
wxss代码:
其实就是opacity的一个过渡动画而已,so easy~~
源码下载
『咻咻咻咻duang,是不是又忘了关注~~』
小程序真的会取代一切?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,是不是又忘了关注~~』
相关文章推荐
- 小程序之『图片懒加载』终极解决方案
- 【LruCache完全解析】Android高效加载大图、多图解决方案,有效避免程序OOM (AdapterView使用LruCache图片缓存)
- 【LruCache完全解析】Android高效加载大图、多图解决方案,有效避免程序OOM (AdapterView使用LruCache图片缓存)
- Android高效加载大图、多图解决方案,有效避免程序OOM(使用LruCache 强引缓存图片用取代软引用)
- Android高效加载大图、多图解决方案,有效避免程序OOM (图片压缩和图片缓存LruCache)
- 让程序在崩溃时体面的退出之终极解决方案(SEH+Dump+Unhandled Exception Filter)
- 让程序在崩溃时体面的退出之终极解决方案(SEH+Dump+Unhandled Exception Filter)
- win2003 iis6 的"请求的资源在使用中"(无法运行ASP程序)终极解决方案
- C/C++:何以在程序中加载JPG图片?
- C/C++:如何在Vc程序中加载JPG图片
- wpf Image动态加载图片终极解决办法
- android 加载大图片时报OOM的解决方案(源码)
- 整合Struts+Spring+hibernate的时加载出错终极解决方案
- 重装VS 2008出现的加载安装组件出错的终极解决方案
- 图片资源加载路径分析以及netbeans打包java程序,并包含图片资源
- iphone开发 来回加载大量 大幅图片时内存溢出的解决方案
- 让程序在崩溃时体面的退出之终极解决方案(SEH+Dump+Unhandled Exception Filter)
- 在不同解决方案之间,或者使用反射加载程序集,怎样使程序进入实时调试模式?
- Win32加载图片到程序中
- 在ArcGIS Server中如何定义“此级别无数据”图片?的终极解决方案