health.applet/miniprogram/components/media-carousel/media-carousel.ts

// 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<string, any>;
  data: any;
  methods: Record<string, Function>;
}

// 声明全局的 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
      });
    }
  }
});