支付宝小程序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;
}

效果