caimei-applets-hehe/components/cm-module/homeIndex/banner.vue

<template>
    <view class="swiper-banner-box">
        <swiper
            class="tui-banner-swiper tui-banner tui-skeleton-fillet"
            :autoplay="true"
            :interval="5000"
            :duration="500"
            @change="swiperChange"
            :circular="true"
        >
            <swiper-item v-for="(item, index) in list" :key="index">
                <image :src="item" class="tui-slide-image" mode="scaleToFill" />
            </swiper-item>
        </swiper>
        <view class="swiper__dots-box" v-if="list.length > 1">
            <view
                v-for="(item, idx) in list"
                :key="idx"
                :class="[idx === current ? 'swiper__dots-long' : 'none']"
                :data-index="current"
                class="swiper__dots-item"
            >
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'address',
    props: {
        list: {
            type: Array
        }
    },
    data() {
        return {
            current: 0
        }
    },
    methods: {
        swiperChange(e) {
            //轮播图切换
            const index = e.detail.current
            this.current = index
        }
    }
}
</script>

<style lang="scss">
.swiper-banner-box {
    width: 100%;
    height: 340rpx;
    position: relative;
    background-size: cover;
}
.tui-banner-swiper {
    width: 700rpx;
    margin: 0 auto;
    height: 340rpx;
    border-radius: 16rpx;
    overflow: hidden;
    transform: translateY(0);
    .banner-item {
        border-radius: 16rpx;
    }
    .tui-slide-image {
        width: 100%;
        height: 340rpx;
        display: block;
    }
}
.swiper__dots-box {
    position: absolute;
    bottom: 24rpx;
    left: 0;
    right: 0;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .swiper__dots-item {
        width: 10rpx;
        height: 10rpx;
        border-radius: 100%;
        margin-left: 6px;
        background-color: rgba(255, 255, 255, 0.7);
    }
    .swiper__dots-long {
        width: 10rpx;
        height: 10rpx;
        border-radius: 4rpx;
        background-color: #fa55bf;
        transition: all 0.4s;
    }
}
</style>