第一次提交

components/page/diyComponents/banner/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <view class="diy-banner" :style="{ height: `${imgHeights[imgCurrent]}px` }">
+    <!-- 图片轮播 -->
+    <swiper
+      :autoplay="autoplay"
+      class="swiper-box"
+      :duration="duration"
+      :circular="true"
+      :interval="itemStyle.interval * 1000"
+      @change="_bindChange"
+    >
+      <swiper-item v-for="(dataItem, index) in dataList" :key="index">
+        <image mode="widthFix" class="slide-image" :src="dataItem.imgUrl" @click="onLink(dataItem.link)" @load="_imagesHeight" />
+      </swiper-item>
+    </swiper>
+    <!-- 指示点 -->
+    <view class="indicator-dots" :class="itemStyle.btnShape">
+      <view
+        class="dots-item"
+        :class="{ active: imgCurrent == index }"
+        :style="{ backgroundColor: itemStyle.btnColor }"
+        v-for="(dataItem, index) in dataList"
+        :key="index"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script>
+import mixin from '../mixin';
+
+export default {
+  name: 'Banner',
+
+  /**
+   * 组件的属性列表
+   * 用于组件自定义设置
+   */
+  props: {
+    itemIndex: String,
+    itemStyle: Object,
+    params: Object,
+    dataList: Array
+  },
+
+  mixins: [mixin],
+
+  /**
+   * 私有数据,组件的初始数据
+   * 可用于模版渲染
+   */
+  data() {
+    return {
+      windowWidth: 750,
+      indicatorDots: false, // 是否显示面板指示点
+      autoplay: true, // 是否自动切换
+      duration: 800, // 滑动动画时长
+      imgHeights: [], // 图片的高度
+      imgCurrent: 0 // 当前banne所在滑块指针
+    };
+  },
+
+  created() {
+    const app = this;
+    uni.getSystemInfo({
+      success({ windowWidth }) {
+        app.windowWidth = windowWidth > 750 ? 750 : windowWidth;
+      }
+    });
+  },
+
+  /**
+   * 组件的方法列表
+   * 更新属性和数据的方法与更新页面数据的方法类似
+   */
+  methods: {
+    /**
+     * 计算图片高度
+     */
+    _imagesHeight({ detail }) {
+      const app = this;
+      // 获取图片真实宽度
+      const { width, height } = detail;
+      // 宽高比
+      const ratio = width / height;
+      // 计算的高度值
+      const viewHeight = app.windowWidth / ratio;
+      // 把每一张图片的高度记录到数组里
+      app.imgHeights.push(viewHeight);
+    },
+
+    /**
+     * 记录当前指针
+     */
+    _bindChange(e) {
+      this.imgCurrent = e.detail.current;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.diy-banner {
+  position: relative;
+
+  // swiper组件
+  .swiper-box {
+    height: 100%;
+
+    .slide-image {
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  /* 指示点 */
+  .indicator-dots {
+    width: 100%;
+    height: 28rpx;
+    padding: 0 20rpx;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 20rpx;
+    opacity: 0.8;
+    display: flex;
+    justify-content: center;
+
+    .dots-item {
+      width: 16rpx;
+      height: 16rpx;
+      margin-right: 8rpx;
+      background-color: #fff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.active {
+        background-color: #313131 !important;
+      }
+    }
+
+    // 圆形
+    &.round .dots-item {
+      width: 16rpx;
+      height: 16rpx;
+      border-radius: 20rpx;
+    }
+
+    // 正方形
+    &.square .dots-item {
+      width: 16rpx;
+      height: 16rpx;
+    }
+
+    // 长方形
+    &.rectangle .dots-item {
+      width: 22rpx;
+      height: 14rpx;
+    }
+  }
+}
+</style>