media-carousel.wxml 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!--components/media-carousel/media-carousel.wxml-->
  2. <view class="media-carousel {{adaptiveHeight ? 'adaptive-height' : ''}}">
  3. <swiper
  4. class="carousel-swiper"
  5. indicator-dots="{{showIndicator}}"
  6. indicator-color="{{indicatorColor}}"
  7. indicator-active-color="{{indicatorActiveColor}}"
  8. autoplay="{{autoplay}}"
  9. interval="{{interval}}"
  10. duration="{{duration}}"
  11. circular="{{circular}}"
  12. bind:change="onChange"
  13. >
  14. <swiper-item wx:for="{{mediaList}}" wx:key="index" class="carousel-item">
  15. <!-- 图片轮播 -->
  16. <view wx:if="{{item.type === 'image'}}" class="image-container">
  17. <image
  18. src="{{item.src}}"
  19. mode="aspectFit"
  20. class="carousel-image"
  21. bind:load="onImageLoad"
  22. bind:error="onImageError"
  23. data-index="{{index}}"
  24. />
  25. <view wx:if="{{item.title}}" class="image-title">{{item.title}}</view>
  26. </view>
  27. <!-- 视频轮播 -->
  28. <view wx:if="{{item.type === 'video'}}" class="video-container">
  29. <video
  30. src="{{item.src}}"
  31. class="carousel-video"
  32. poster="{{item.poster}}"
  33. show-center-play-btn="{{true}}"
  34. show-play-btn="{{true}}"
  35. controls="{{true}}"
  36. object-fit="cover"
  37. autoplay="{{true}}"
  38. loop="{{true}}"
  39. muted="{{true}}"
  40. bind:play="onVideoPlay"
  41. bind:pause="onVideoPause"
  42. bind:ended="onVideoEnded"
  43. bind:error="onVideoError"
  44. data-index="{{index}}"
  45. />
  46. <view wx:if="{{item.title}}" class="video-title">{{item.title}}</view>
  47. </view>
  48. </swiper-item>
  49. </swiper>
  50. </view>