微信小程序自定义组件，图片加载出来之前的默认图或者默认loading动画

一、自定义组件 image-loader
image-loader.wxml

<view wx:if&＃61;"{{!finishLoadFlag}}" class&＃61;"defaultImg" style&＃61;"{{width ? &＃39;width:&＃39; &＃43; width : &＃39;&＃39;}};{{height ? &＃39;height:&＃39; &＃43; height : &＃39;&＃39;}}" ><view class&＃61;"loadEffect" hidden&＃61;"{{errorFlag}}"><view class&＃61;"span">view><view class&＃61;"span">view><view class&＃61;"span">view><view class&＃61;"span">view><view class&＃61;"span">view>view><view class&＃61;"loadEffectError" style&＃61;"{{height ? &＃39;line-height:&＃39; &＃43; height : &＃39;&＃39;}};" hidden&＃61;"{{!errorFlag}}">加载失败view>
view>
<image mode&＃61;"{{mode}}" class&＃61;"originImg {{finishLoadFlag ? &＃39;&＃39; : &＃39;before-load&＃39;}}" src&＃61;"{{originalImage}}" bindload&＃61;"finishLoad" binderror&＃61;"errorLoad" style&＃61;"{{finishLoadFlag && width ? &＃39;width:&＃39; &＃43; width : &＃39;&＃39;}};{{finishLoadFlag && height ? &＃39;height:&＃39; &＃43; height : &＃39;&＃39;}}" />


image-loader.wxss

.before-load {width : 0;height : 0;opacity: 0;vertical-align: middle;
}
.defaultImg{display:inline-block;vertical-align: middle;background:rgba(254,200,92,0.1);
}
.originImg{vertical-align: middle;
}
.loadEffect{width:100%;height:100%;display:flex;justify-content: space-around;align-items:center;
}
.loadEffectError{text-align:center;width:100%;height:100%;color:#FB9541;
}
.loadEffect .span{display: inline-block;width: 22rpx;height: 22rpx;border-radius: 50%;background: rgba(254,200,92,0.7);-webkit-animation: load 1.04s ease infinite;animation: load 1.04s ease infinite;
}
/* .loadEffect span:last-child{margin-right: 0rpx;
} */
&＃64;-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;}
}
&＃64;keyframes load{0%{opacity: 1;}100%{opacity: 0;}
}
.loadEffect .span:nth-child(1){-webkit-animation-delay:0.13s;animation-delay:0.13s;
}
.loadEffect .span:nth-child(2){-webkit-animation-delay:0.26s;animation-delay:0.26s;
}
.loadEffect .span:nth-child(3){-webkit-animation-delay:0.39s;animation-delay:0.39s;
}
.loadEffect .span:nth-child(4){-webkit-animation-delay:0.52s;animation-delay:0.52s;
}
.loadEffect .span:nth-child(5){-webkit-animation-delay:0.65s;animation-delay:0.65s;
}


image-loader.json

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


image-loader.js

/*** 图片预加载组件*/
Component({options: {styleIsolation: &＃39;isolated&＃39;},properties: {//默认图片defaultImage: String,//原始图片originalImage: String,width: String,height: String,finishLoadFlag:{type:Boolean,value:false},errorFlag:{type:Boolean,value:false},//图片剪裁mode&＃xff0c;同Image组件的modemode: {type:String,value:&＃39;scaleToFill&＃39;}},methods: {finishLoad: function (e) {let finishLoadFlag &＃61; true;let errorFlag &＃61; false;this.triggerEvent(&＃39;changeFlag&＃39;,{finishLoadFlag,errorFlag});},errorLoad(){let finishLoadFlag &＃61; false;let errorFlag &＃61; true;this.triggerEvent(&＃39;changeFlag&＃39;,{finishLoadFlag,errorFlag});}}
})


二、调用自定义组件
调用页面组件&＃xff1a;
json 文件

"usingComponents": {"image-loader": "../../../components/image-loader/image-loader"
}


.xml 文件

<image-loader width&＃61;"640rpx" height&＃61;"360rpx" originalImage&＃61;"{{imgPath}}" finishLoadFlag&＃61;"{{finishLoadFlag}}" errorFlag&＃61;"{{errorFlag}}" bind:changeFlag&＃61;"changeFlag">image-loader>


js 文件

//定义&＃xff1a;
data:{finishLoadFlag:false,errorFlag:false,imgPath:&＃39;&＃39;
}
//imgPath 为远程图片地址
//changeFlag 函数是切换远程图片地址要更改当前图片加载状态
changeFlag(e){let finishLoadFlag &＃61; e.detail.finishLoadFlag;let errorFlag &＃61; e.detail.errorFlag;this.setData({finishLoadFlag,errorFlag})
},