// components/media-carousel/media-carousel.ts // 定义微信小程序组件的类型 interface IComponentInstance { setData: (data: any) => void; triggerEvent: (name: string, detail: any) => void; data: any; properties: any; } interface IComponentOptions { properties: Record; data: any; methods: Record; } // 声明全局的 Component 函数 declare function Component(options: IComponentOptions): void; Component({ /** * 组件的属性列表 */ properties: { // 媒体列表 mediaList: { type: Array, value: [], observer: function(this: IComponentInstance, newVal: any[]) { this.setData({ totalCount: newVal.length }); } }, // 项目ID,用于标识轮播图属于哪个项目 itemId: { type: String, value: '' }, // 是否显示指示器 showIndicator: { type: Boolean, value: true }, // 指示器颜色 indicatorColor: { type: String, value: 'rgba(255, 255, 255, 0.6)' }, // 指示器激活颜色 indicatorActiveColor: { type: String, value: '#fff' }, // 是否自动播放 autoplay: { type: Boolean, value: true }, // 自动播放间隔时间 interval: { type: Number, value: 3000 }, // 滑动动画时长 duration: { type: Number, value: 500 }, // 是否循环播放 circular: { type: Boolean, value: true } }, /** * 组件的初始数据 */ data: { currentIndex: 0, totalCount: 0 }, /** * 组件的方法列表 */ methods: { // 图片加载成功 onImageLoad(this: IComponentInstance, e: any) { const { index } = e.currentTarget.dataset; this.triggerEvent('imageload', { index: index, item: this.data.mediaList[index], itemId: this.properties.itemId }); }, // 图片加载失败 onImageError(this: IComponentInstance, e: any) { const { index } = e.currentTarget.dataset; this.triggerEvent('imageerror', { index: index, item: this.data.mediaList[index], itemId: this.properties.itemId }); }, // 视频播放错误 onVideoError(this: IComponentInstance, e: any) { const { index } = e.currentTarget.dataset; this.triggerEvent('videoerror', { index: index, item: this.data.mediaList[index], itemId: this.properties.itemId }); } } });