index.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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 dataList" :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 dataList" :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. newData.map((item) => {
  51. item.imgUrl = item.imgUrl.replace('http://10.16.4.7','https://www.ccsckj.com')
  52. item.imgUrl = item.imgUrl.replace('http://121.36.73.159:810','https://www.ccsckj.com')
  53. })
  54. }
  55. }
  56. },
  57. created() {
  58. const app = this;
  59. uni.getSystemInfo({
  60. success({ windowWidth }) {
  61. app.windowWidth = windowWidth > 750 ? 750 : windowWidth;
  62. }
  63. });
  64. },
  65. /**
  66. * 组件的方法列表
  67. * 更新属性和数据的方法与更新页面数据的方法类似
  68. */
  69. methods: {
  70. /**
  71. * 计算图片高度
  72. */
  73. _imagesHeight({ detail }) {
  74. const app = this;
  75. // 获取图片真实宽度
  76. const { width, height } = detail;
  77. // 宽高比
  78. const ratio = width / height;
  79. // 计算的高度值
  80. const viewHeight = app.windowWidth / ratio;
  81. // 把每一张图片的高度记录到数组里
  82. app.imgHeights.push(viewHeight);
  83. },
  84. /**
  85. * 记录当前指针
  86. */
  87. _bindChange(e) {
  88. this.imgCurrent = e.detail.current;
  89. }
  90. }
  91. };
  92. </script>
  93. <style lang="scss" scoped>
  94. .diy-banner {
  95. position: relative;
  96. // swiper组件
  97. .swiper-box {
  98. height: 100%;
  99. .slide-image {
  100. width: 100%;
  101. height: 100%;
  102. margin: 0 auto;
  103. display: block;
  104. }
  105. }
  106. /* 指示点 */
  107. .indicator-dots {
  108. width: 100%;
  109. height: 28rpx;
  110. padding: 0 20rpx;
  111. position: absolute;
  112. left: 0;
  113. right: 0;
  114. bottom: 20rpx;
  115. opacity: 0.8;
  116. display: flex;
  117. justify-content: center;
  118. .dots-item {
  119. width: 16rpx;
  120. height: 16rpx;
  121. margin-right: 8rpx;
  122. background-color: #fff;
  123. &:last-child {
  124. margin-right: 0;
  125. }
  126. &.active {
  127. background-color: #313131 !important;
  128. }
  129. }
  130. // 圆形
  131. &.round .dots-item {
  132. width: 16rpx;
  133. height: 16rpx;
  134. border-radius: 20rpx;
  135. }
  136. // 正方形
  137. &.square .dots-item {
  138. width: 16rpx;
  139. height: 16rpx;
  140. }
  141. // 长方形
  142. &.rectangle .dots-item {
  143. width: 22rpx;
  144. height: 14rpx;
  145. }
  146. }
  147. }
  148. </style>