89 lines
1.6 KiB
JavaScript
89 lines
1.6 KiB
JavaScript
// pages/demo1/item1.js
|
|
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
externalClasses: ['custom-class'],
|
|
options:{
|
|
virtualHost: true
|
|
},
|
|
properties: {
|
|
src:{
|
|
value:'',
|
|
type:String
|
|
},
|
|
customStyle:{
|
|
value:'',
|
|
type:String
|
|
},
|
|
mode:{
|
|
value:'scaleToFill',
|
|
type:String
|
|
},
|
|
webp:{
|
|
value:false,
|
|
type:Boolean
|
|
},
|
|
showMenuByLongpress:{
|
|
value:false,
|
|
type:Boolean
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
url:'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image.png',
|
|
loading:false
|
|
},
|
|
observers:{
|
|
'src':function(newVal,oldVal){
|
|
this.createImage();
|
|
}
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
lifetimes:{
|
|
attached(){
|
|
|
|
},
|
|
detached(){
|
|
this.detachedImage();
|
|
}
|
|
},
|
|
ready(){
|
|
|
|
},
|
|
methods: {
|
|
imgload(evt){
|
|
// console.log("加载完成",evt)
|
|
this.triggerEvent("load",evt);
|
|
},
|
|
imgerror(evt){
|
|
this.triggerEvent("error",evt);
|
|
},
|
|
createImage(){
|
|
this.detachedImage();
|
|
this.data.loading=false;
|
|
this._observer = wx.createIntersectionObserver(this);
|
|
this._observer
|
|
.relativeToViewport({bottom:30})
|
|
.observe('.lazy-image', (res) => {
|
|
//console.log(res);
|
|
if(res.intersectionRatio > 0 && this.data.loading==false)
|
|
this.setData({
|
|
url: this.data.src,
|
|
loading:true
|
|
});
|
|
});
|
|
},
|
|
detachedImage(){
|
|
if(this._observer){
|
|
this._observer.disconnect();
|
|
}
|
|
}
|
|
}
|
|
});
|