89 lines
2.0 KiB
JavaScript
89 lines
2.0 KiB
JavaScript
const systemInfo = wx.getSystemInfoSync();
|
||
Component({
|
||
externalClasses: ['t-class', 't-class-load'],
|
||
properties: {
|
||
loadFailed: {
|
||
type: String,
|
||
value: 'default',
|
||
},
|
||
loading: {
|
||
type: String,
|
||
value: 'default',
|
||
},
|
||
src: {
|
||
type: String,
|
||
value: '',
|
||
},
|
||
mode: {
|
||
type: String,
|
||
value: 'aspectFill',
|
||
},
|
||
webp: {
|
||
type: Boolean,
|
||
value: true,
|
||
},
|
||
lazyLoad: {
|
||
type: Boolean,
|
||
value: false,
|
||
},
|
||
showMenuByLongpress: {
|
||
type: Boolean,
|
||
value: false,
|
||
},
|
||
},
|
||
data: {
|
||
thumbHeight: 375,
|
||
thumbWidth: 375,
|
||
systemInfo,
|
||
},
|
||
lifetimes: {
|
||
ready() {
|
||
const { mode } = this.properties;
|
||
// 获取容器的真实宽高，设置图片的裁剪宽度
|
||
this.getRect('.J-image').then((res) => {
|
||
if (res) {
|
||
const { width, height } = res;
|
||
this.setData(
|
||
mode === 'heightFix'
|
||
? {
|
||
thumbHeight: this.px2rpx(height) || 375,
|
||
}
|
||
: {
|
||
thumbWidth: this.px2rpx(width) || 375,
|
||
},
|
||
);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
methods: {
|
||
px2rpx(px) {
|
||
return (750 / (systemInfo.screenWidth || 375)) * px;
|
||
},
|
||
getRect(selector) {
|
||
return new Promise((resolve) => {
|
||
if (!this.selectorQuery) {
|
||
this.selectorQuery = this.createSelectorQuery();
|
||
}
|
||
this.selectorQuery.select(selector).boundingClientRect(resolve).exec();
|
||
});
|
||
},
|
||
onLoad(e) {
|
||
this.triggerEvent('load', e.detail);
|
||
},
|
||
onError(e) {
|
||
this.triggerEvent('error', e.detail);
|
||
},
|
||
// 添加错误处理方法，防止组件报错
|
||
handleError(e) {
|
||
console.warn('[webp-image] 图片加载失败:', e.detail);
|
||
this.triggerEvent('error', e.detail);
|
||
},
|
||
// 添加onError方法的别名，确保兼容性
|
||
error(e) {
|
||
console.warn('[webp-image] 图片错误事件:', e);
|
||
this.onError(e);
|
||
},
|
||
},
|
||
});
|