media-carousel.wxml 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!--components/media-carousel/media-carousel.wxml-->
  2. <view class="media-carousel">
  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. >
  13. <swiper-item wx:for="{{mediaList}}" wx:key="index" class="carousel-item">
  14. <!-- 图片轮播 -->
  15. <view wx:if="{{item.type === 'image'}}" class="image-container">
  16. <image
  17. src="{{item.src}}"
  18. mode="aspectFit"
  19. class="carousel-image"
  20. bind:load="onImageLoad"
  21. bind:error="onImageError"
  22. data-index="{{index}}"
  23. />
  24. <view wx:if="{{item.title}}" class="image-title">{{item.title}}</view>
  25. </view>
  26. <!-- 视频轮播 -->
  27. <view wx:if="{{item.type === 'video'}}" class="video-container">
  28. <video
  29. src="{{item.src}}"
  30. class="carousel-video"
  31. bind:error="onVideoError"
  32. data-index="{{index}}"
  33. />
  34. <view wx:if="{{item.title}}" class="video-title">{{item.title}}</view>
  35. </view>
  36. </swiper-item>
  37. </swiper>
  38. </view>