carousels_20230522094409.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <view class="swiper-content">
  3. <swiper class="swiper-box" autoplay :interval="3000" circular @change="change">
  4. <swiper-item v-for="(item ,index) in BannerList" :key="`swiper_${index}`">
  5. <view class="swiper-item" @click.stop="lookDetails(item)">
  6. <image :src="item.thumbnail" ></image>
  7. </view>
  8. </swiper-item>
  9. </swiper>
  10. <div class="custom-indicator">
  11. <span :class="['indicator' , current === index ? 'active-indicator' : '']"
  12. v-for="(item , index) in BannerList">
  13. </span>
  14. </div>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. name: "carousels",
  20. props: {
  21. BannerList: {
  22. type: Array,
  23. default: () => []
  24. }
  25. },
  26. data() {
  27. return {
  28. info: [{
  29. content: '内容 A'
  30. }, {
  31. content: '内容 B'
  32. }, {
  33. content: '内容 C'
  34. }],
  35. current: 0,
  36. mode: 'round',
  37. }
  38. },
  39. methods: {
  40. change(e) {
  41. this.current = e.detail.current;
  42. },
  43. lookDetails(item){
  44. uni.navigateTo({
  45. url: this.$path.articleDetails + `${item.id}`
  46. })
  47. }
  48. }
  49. }
  50. </script>
  51. <style lang="scss" scoped>
  52. .swiper-box{
  53. height: 280rpx;
  54. }
  55. .swiper-content {
  56. padding: 0 $pages-padding;
  57. }
  58. .swiper-box {
  59. .swiper-item {
  60. width: 100%;
  61. height: 280rpx;
  62. image {
  63. width: 100%;
  64. height: 100%;
  65. border-radius: 10rpx;
  66. }
  67. }
  68. }
  69. .custom-indicator {
  70. width: 100%;
  71. padding-top: 20rpx;
  72. display: flex;
  73. justify-content: center;
  74. align-items: center;
  75. flex-wrap: wrap;
  76. // gap: 20rpx 20rpx;
  77. .indicator {
  78. width: 8rpx;
  79. height: 8rpx;
  80. background-color: #d9d9d9;
  81. transform: rotate(45deg);
  82. }
  83. .indicator+.indicator {
  84. margin-left: 16rpx;
  85. }
  86. .active-indicator {
  87. background-color: #27B082;
  88. }
  89. }
  90. // .my-swipe {
  91. // overflow: hidden;
  92. // ::v-deep .van-swipe__track {
  93. // height: 280rpx;
  94. // }
  95. // .van-swipe-item {
  96. // display: inline-block;
  97. // height: 100%;
  98. // .swipe-img {
  99. // width: 100%;
  100. // height: 100%;
  101. // ::v-deep .van-image__img {
  102. // width: 100%;
  103. // height: 100%;
  104. // }
  105. // }
  106. // ;
  107. // }
  108. // }
  109. // .custom-indicator {
  110. // width: 100%;
  111. // padding-top: 15rpx;
  112. // display: flex;
  113. // justify-content: center;
  114. // align-items: center;
  115. // flex-wrap: wrap;
  116. // gap: 20rpx 20rpx;
  117. // .indicator {
  118. // width: 10rpx;
  119. // height: 10rpx;
  120. // background-color: #d9d9d9;
  121. // transform: rotate(45deg);
  122. // }
  123. // .active-indicator {
  124. // background-color: #27B082;
  125. // }
  126. // }
  127. </style>