uniapp 轮播组件

luckycoke

于 2024-08-13 16:30:39 发布

阅读量44

点赞数 1

文章标签： uni-app java javascript

本文链接：https://blog.csdn.net/qq_44759522/article/details/141167394

版权

<template>
  <view class="carousel-container">
    <swiper
      :autoplay="autoplay"
      :interval="interval"
      :circular="circular"
      :indicator-dots="indicatorDots"
      :indicator-color="indicatorColor"
      :indicator-active-color="indicatorActiveColor"
      @change="onChange"
      :previous-margin="margin"
      :next-margin="margin"
    >
      <swiper-item v-for="(item, index) in images" :key="index" class="swiper-item">
        <image :src="item.src" mode="aspectFill" class="swiper-image"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  name: "Carousel",
  props: {
    images: {
      type: Array,
      default: () => [
        {
          src: "https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b",
        },
        {
          src: "https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b",
        },
        {
          src: "https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b",
        },
      ],
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 3000
    },
    circular: {
      type: Boolean,
      default: true
    },
    indicatorDots: {
      type: Boolean,
      default: true
    },
    indicatorColor: {
      type: String,
      default: 'rgba(255, 255, 255, 0.6)'
    },
    indicatorActiveColor: {
      type: String,
      default: '#ffffff'
    },
    margin: {
      type: String,
      default: '10rpx'
    }
  },
  methods: {
    onChange(e) {
      this.$emit('change', e.detail.current);
    }
  }
};
</script>

<style scoped>
.carousel-container {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
  padding: 10rpx 0;
}

.reverse-swiper {
  transform: scaleX(-1);
}

.swiper-item {
  box-sizing: border-box;
  padding: 0 10rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20rpx;
  transform: scaleX(-1);
}
</style>