微信小程序UI之旅：图片组件实现占位图功能

组件样式：

github传送门：https://github.com/albert-lii/wx-abui/tree/master/abui/widgets/ab-easy-image
demo传送门：https://github.com/albert-lii/wx-abui/tree/master/pages/mainex

自定义属性和方法

属性	描述
src	图片资源
placeholder	图片未加载完成时的占位图
error	图片加载失败时的占位图
lazyload	是否使用懒加载
mode	图片显示模式

方法	描述
bindsuccess	图片加载成功监听
bindfail	图片加载失败监听

使用示例

<view class="container">
   <ab-easy-image class="circle-easy-image" src="{{imgUrl}}" placeholder="{{imgPlaceholder}}" radius="100%" bindsuccess="loadSuccess" bindfail="loadFail" />
   <ab-easy-image class="square-easy-image" src="{{imgUrl}}" placeholder="{{imgPlaceholder}}"/>
view>

.circle-easy-image, .square-easy-image {
  width: 200rpx;
  height: 200rpx;
  margin-left: 275rpx;
  margin-top: 30rpx;
}

.circle-easy-image {
  border-radius: 100%;
  border: 2px solid gold;
}

.square-easy-image {
  border: 2px solid green;
  background-color: #fefefe;
}

Page({

  data: {
    imgPlaceholder: 'https://shenpan.oss-cn-shanghai.aliyuncs.com/469/picture4.jpg',
    imgError: 'https://shenpan.oss-cn-shanghai.aliyuncs.com/469/picture4.jpg',
    imgUrl: 'https://shenpan.oss-cn-shanghai.aliyuncs.com/4626/25.jpg',
  },
  /**
   * 图片加载成功
   */
  loadSuccess: function (e) {
    console.log('easy-image loadSuccess');
    console.log(e);
  },
  /**
   * 图片加载失败
   */
  loadFail: function (e) {
    console.log('easy-image loadFail');
    console.log(e);
  }
})

{
  "navigationBarTitleText": "abui",
  "usingComponents": {
    "ab-easy-image": "../../abui/widgets/ab-easy-image/ab-easy-image"
  }
}

源码

• ab-easy-image.wxml

<view class="ab-easy-image">
 <image wx:if="{{!loadFinish && placeholder}}" class="ab-easy-image__pic" style="border-radius:{{radius}};" src="{{placeholder}}" mode="{{mode}}" />
  <image class="ab-easy-image__pic" style="border-radius:{{radius}};" src="{{src}}" lazy-load="{{lazyload}}" mode="{{mode}}" bindload="_loadSuccess" binderror="_loadFail" />
view>

• ab-easy-image.wxss

.ab-easy-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.ab-easy-image__pic {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

• ab-easy-image.js

Component({
  properties: {
    // 图片资源
    src: {
      type: String,
      value: ''
    },
    // 图片未加载完成时的占位图
    placeholder: {
      type: String,
      value: ''
    },
    // 图片加载失败时的占位图
    error: {
      type: String,
      value: ''
    },
    // 是否执行懒加载
    lazyload: {
      type: Boolean,
      value: false
    },
    // 图片的弧度
    radius: {
      type: String,
      value: '0%'
    },
    // 图片显示模式
    mode: {
      type: String,
      value: 'aspectFill'
    }
  },

  data: {
    // 是否加载完成
    loadFinish: false
  },

  methods: {
    /**
     * 加载成功
     */
    _loadSuccess: function(e) {
      this.setData({
        loadFinish: true
      });
      this.triggerEvent('success', e);
    },
    /**
     * 加载失败
     */
    _loadFail: function(e) {
      this.setData({
        loadFinish: true,
        src: this.data.error
      });
      this.triggerEvent('fail', e);
    }
  }
})

• ab-easy-image.json

{
  "component": true,
  "usingComponents": {}
}