topSwiper.vue 909 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view class="carousel">
  3. <swiper indicator-dots :circular="true" duration="400">
  4. <swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
  5. <view class="image-wrapper"><image :src="item" class="loaded" mode="scaleToFill"></image></view>
  6. </swiper-item>
  7. </swiper>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. props: {
  13. imgList: {
  14. type: Array,
  15. default: function () {
  16. return []
  17. }
  18. },
  19. },
  20. data() {
  21. return {
  22. };
  23. },
  24. };
  25. </script>
  26. <style lang="scss">
  27. .carousel {
  28. /* #ifdef APP-PLUS */
  29. padding-top: var(--status-bar-height);
  30. /* #endif */
  31. height: 700rpx;
  32. position: relative;
  33. swiper {
  34. height: 100%;
  35. }
  36. .image-wrapper {
  37. width: 100%;
  38. height: 100%;
  39. }
  40. .swiper-item {
  41. display: flex;
  42. justify-content: center;
  43. align-content: center;
  44. height: 700rpx;
  45. overflow: hidden;
  46. image {
  47. width: 100%;
  48. height: 100%;
  49. }
  50. }
  51. }
  52. </style>