<image wx:if='{{!finishLoadFlag}}' mode='{{mode}}' src='{{defaultImage}}' style='{{width ? "width:" + width : ""}};' class='image-class'/>
<image mode='{{mode}}' class='{{finishLoadFlag ? "" : "before-load"}}' src='{{originalImage}}' bindload='finishLoad' style='{{finishLoadFlag && width ? "width:" + width : ""}};' />
.before-load {
width: 0;
height: 0;
opacity: 0;
}
Component({
properties: {
//默认图片
defaultImage: String,
//原始图片
originalImage: String,
width: String,
//图片剪裁mode,同Image组件的mode
mode: String,
},
data: {
finishLoadFlag: false
},
methods: {
finishLoad: function (e) {
this.setData({
finishLoadFlag: true,
});
}
},
});
使用:
- 在要使用占位图页面的json中引入封装的组件
{
"usingComponents": {
"goodsList": "../../../components/goodsList/goodsList"
},
"navigationBarTitleText": "申请退换"
}
- 在使用界面通过定义的组件名来引用
<image-loader default-image='/static/default/home-banner.png' mode='widthFix'
original-image="{{utils.getImageUrl(item.picPath)}}"></image-loader>