支付宝小程序01-图片淡出效果

实现思路:通过image组件的onload事件设置图片opacity从0 -> 1

代码

.axml文件,设置data-index属性,图片加载完毕会调用imageLoad。获取index参数设置item.opacity = 1

 <view class="article-item" a:for="{{list}}" a:for-item="item">
 <view class="image-box">
 <image src="{{item.img}}" 
 mode="aspectFill" 
 data-index="{{index}}"
 class="article-image" 
 style="opacity: {{item.opacity}}" 
 onLoad="imageLoad"/>
 </view>
 </view>

.js文件

Page({
 data: {
 list: [
 {
 "id":"49f4fc8121054a0cb423fd341824dd15",
 "title":"能把世界装起来的拉杆箱,才能叫做旅行",
 "img":"http://ota7edsn7.bkt.clouddn.com/1/20180629/1108017349a250.jpg"
 },
 {
 "id":"cb3c02e3daf7444bb4af8173452285b0",
 "title":"旅途的记录不仅只是照片而已———小米90分全金属旅行箱",
 "img":"http://ota7edsn7.bkt.clouddn.com/1/20180629/152551775d1708.jpg"
 }
 ]
 },
 onLoad () {
 },
 imageLoad (e) {
 let images = this.data.list;
 images[e.target.dataset.index].opacity = '1';
 this.setData ({
 list: images
 })
 }
});

.acss文件

.article-item .image-box {
 height: 300rpx;
 background: #eeeeee;
}
.article-item .article-image {
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 0.3s;
}

效果

    作者:youyou原文地址:https://segmentfault.com/a/1190000015437838

    %s 个评论

    要回复文章请先登录注册