media-carousel.ts 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. // components/media-carousel/media-carousel.ts
  2. Component({
  3. properties: {
  4. mediaList: {
  5. type: Array,
  6. value: [],
  7. observer: function (this: any, newVal: any[]) {
  8. this.setData({
  9. totalCount: newVal.length,
  10. });
  11. },
  12. },
  13. itemId: {
  14. type: String,
  15. value: "",
  16. },
  17. // 是否显示指示器
  18. showIndicator: {
  19. type: Boolean,
  20. value: true,
  21. },
  22. // 指示器颜色
  23. indicatorColor: {
  24. type: String,
  25. value: "rgba(255, 255, 255, 0.6)",
  26. },
  27. // 指示器激活颜色
  28. indicatorActiveColor: {
  29. type: String,
  30. value: "#fff",
  31. },
  32. // 是否自动播放
  33. autoplay: {
  34. type: Boolean,
  35. value: true,
  36. },
  37. // 自动播放间隔时间
  38. interval: {
  39. type: Number,
  40. value: 3000,
  41. },
  42. // 滑动动画时长
  43. duration: {
  44. type: Number,
  45. value: 500,
  46. },
  47. // 是否循环播放
  48. circular: {
  49. type: Boolean,
  50. value: true,
  51. },
  52. },
  53. data: {
  54. totalCount: 0,
  55. },
  56. methods: {
  57. // 全屏
  58. onFullscreenChange(this: any, e: WechatMiniprogram.VideoFullScreenChange) {
  59. const { fullScreen } = e.detail || {};
  60. this.triggerEvent("fullscreenchange", { fullScreen });
  61. },
  62. },
  63. });