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

效果