caimei-applets-store/components/views/cm-banner/cm-banner.vue

<template>
    <view class="banner" v-if="list.length > 0">
        <uni-swiper-dot :info="list" :current="current" mode="dot" :dotsStyles="dotsStyles">
            <swiper
                :indicator-dots="false"
                :autoplay="autoplay"
                :interval="interval"
                :duration="duration"
                :circular="true"
                :style="{ height: height }"
                :current="current"
                @change="onChange"
            >
                <swiper-item v-for="(item, index) in list" :key="index">
                    <view class="swiper-item" :style="[{ margin: margin }]" @click.stop="$emit('click', index)">
                        <image :src="item" :style="{ borderRadius: radius }"></image>
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
    </view>
</template>

<script>
export default {
    name: 'cm-banner',
    props: {
        list: {
            type: Array,
            default: () => []
        },
        current: {
            type: Number,
            default: 0
        },
        autoplay: {
            type: Boolean,
            default: true
        },
        interval: {
            type: Number,
            default: 3000
        },
        duration: {
            type: Number,
            default: 200
        },
        margin: {
            type: String,
            default: '0 24rpx'
        },
        radius: {
            type: String,
            default: '16rpx'
        },
        height: {
            type: String,
            default: '340rpx'
        }
    },
    data() {
        return {
            dotsStyles: {
                width: 6,
                bottom: 8,
                color: 'background: rgba(255, 255, 255, 0.39)',
                backgroundColor: 'background: rgba(255, 255, 255, 0.39)',
                border: '0',
                selectedBackgroundColor: '#FF457B',
                selectedBorder: '#FF457B'
            }
        }
    },
    methods: {
        onChange(e) {
            this.$emit('change', e.detail.current)
        }
    }
}
</script>

<style lang="scss" scoped>
.swiper-item {
    overflow: hidden;
    height: 100%;
    image {
        display: block;
        width: 100%;
        height: 100%;
    }
}
</style>