实现思路：通过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;
}
效果
过渡.gif
