index.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <template>
  2. <view class="diy-banner" :style="{ height: `${imgHeights[imgCurrent]}px` }">
  3. <!-- 图片轮播 -->
  4. <swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :circular="true" :interval="itemStyle.interval * 1000" @change="_bindChange">
  5. <swiper-item v-for="(dataItem, index) in newList" :key="index">
  6. <image mode="widthFix" class="slide-image" :src="dataItem.imgUrl" @click="onLink(dataItem.link)" @load="_imagesHeight" />
  7. </swiper-item>
  8. </swiper>
  9. <!-- 指示点 -->
  10. <view class="indicator-dots" :class="itemStyle.btnShape">
  11. <view class="dots-item" :class="{ active: imgCurrent == index }" :style="{ backgroundColor: itemStyle.btnColor }"
  12. v-for="(dataItem, index) in newList" :key="index"></view>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. import mixin from '../mixin';
  18. export default {
  19. name: 'Banner',
  20. /**
  21. * 组件的属性列表
  22. * 用于组件自定义设置
  23. */
  24. props: {
  25. itemIndex: String,
  26. itemStyle: Object,
  27. params: Object,
  28. dataList: Array
  29. },
  30. mixins: [mixin],
  31. /**
  32. * 私有数据,组件的初始数据
  33. * 可用于模版渲染
  34. */
  35. data() {
  36. return {
  37. windowWidth: 750,
  38. indicatorDots: false, // 是否显示面板指示点
  39. autoplay: true, // 是否自动切换
  40. duration: 800, // 滑动动画时长
  41. imgHeights: [], // 图片的高度
  42. imgCurrent: 0 ,// 当前banne所在滑块指针
  43. newList: [],
  44. };
  45. },
  46. watch:{
  47. dataList:{
  48. immediate:true,
  49. handler(newData){
  50. this.newList = this.$http2https(newData,'imgUrl')
  51. }
  52. }
  53. },
  54. created() {
  55. const app = this;
  56. uni.getSystemInfo({
  57. success({ windowWidth }) {
  58. app.windowWidth = windowWidth > 750 ? 750 : windowWidth;
  59. }
  60. });
  61. },
  62. /**
  63. * 组件的方法列表
  64. * 更新属性和数据的方法与更新页面数据的方法类似
  65. */
  66. methods: {
  67. /**
  68. * 计算图片高度
  69. */
  70. _imagesHeight({ detail }) {
  71. const app = this;
  72. // 获取图片真实宽度
  73. const { width, height } = detail;
  74. // 宽高比
  75. const ratio = width / height;
  76. // 计算的高度值
  77. const viewHeight = app.windowWidth / ratio;
  78. // 把每一张图片的高度记录到数组里
  79. app.imgHeights.push(viewHeight);
  80. },
  81. /**
  82. * 记录当前指针
  83. */
  84. _bindChange(e) {
  85. this.imgCurrent = e.detail.current;
  86. }
  87. }
  88. };
  89. </script>
  90. <style lang="scss" scoped>
  91. .diy-banner {
  92. position: relative;
  93. // swiper组件
  94. .swiper-box {
  95. height: 100%;
  96. .slide-image {
  97. width: 100%;
  98. height: 100%;
  99. margin: 0 auto;
  100. display: block;
  101. }
  102. }
  103. /* 指示点 */
  104. .indicator-dots {
  105. width: 100%;
  106. height: 28rpx;
  107. padding: 0 20rpx;
  108. position: absolute;
  109. left: 0;
  110. right: 0;
  111. bottom: 20rpx;
  112. opacity: 0.8;
  113. display: flex;
  114. justify-content: center;
  115. .dots-item {
  116. width: 16rpx;
  117. height: 16rpx;
  118. margin-right: 8rpx;
  119. background-color: #fff;
  120. &:last-child {
  121. margin-right: 0;
  122. }
  123. &.active {
  124. background-color: #313131 !important;
  125. }
  126. }
  127. // 圆形
  128. &.round .dots-item {
  129. width: 16rpx;
  130. height: 16rpx;
  131. border-radius: 20rpx;
  132. }
  133. // 正方形
  134. &.square .dots-item {
  135. width: 16rpx;
  136. height: 16rpx;
  137. }
  138. // 长方形
  139. &.rectangle .dots-item {
  140. width: 22rpx;
  141. height: 14rpx;
  142. }
  143. }
  144. }
  145. </style>