fanghuayuexuan/pages/home/components/home-hot.vue

<!--
 * @Author: jmy
 * @Date: 2026-01-06 12:02:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2026-01-06 15:02:20
 * @Description: 自定义轮播图组件
-->
<template>
    <view class="w-all relative zi-2  mt-4">
        <swiper class="w-all" :style="{ height: height * 2 + 'rpx', }" :circular="circular"
            :indicator-dots="indicatorDots" indicator-active-color="#02B176 " indicator-color="#EEEEEE"
            :autoplay="autoplay" :interval="interval" :duration="duration" :current="current"
            :display-multiple-items='displayMultipleItems' :next-margin="nextMargin" @change="change"
            @transition="transition" @animationfinish="animationfinish">
            <swiper-item class="flex flex-wrap h-all " v-for="(item, index) in swiperList" :key="index">
                <view class="w-74 h-82 bg-white flex items-center justify-center">
                    <view class="w-64 h-82 flex flex-column items-center  justify-center">
                        <image style="border: 1px solid #ffffff;"
                            src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422"
                            class="w-46 h-46 rounded-6" />
                        <view class="h-15 text-ellipsis fw-400 fs-10 my-3 fw-500 text-D46C0D">营养保健Top1</view>
                        <view class="w-54 h-16 rounded-16  text-D46C0D text-center fs-10 fw-400 relative">
                            热销234件
                            <image src="/static/images/home/hot_selling_list_img@2x.png"
                                class="w-8 h-12 absolute top-0 left--4 zi-10 rotateY-180" />
                            <image src="/static/images/home/hot_selling_list_img@2x.png"
                                class="w-8 h-12  absolute top-0 right--4 zi-10" />
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <view class="flex items-center justify-center w-all gap-6 mt-11" v-if="isCustomDot">
            <view v-for="(item, index) in swiperList" :key="index" class="w-10 h-2  rounded-1"
                :class="index == current ? 'bg-02B176' : 'bg-EEEEEE'"></view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        swiperList: {
            type: Array,
            default: () => []
        },
        // 轮播图高度rpx
        height: {
            type: Number,
            default: 85
        },
        // 是否显示指示器
        indicatorDots: {
            type: Boolean,
            default: false
        },
        // 是否循环播放
        circular: {
            type: Boolean,
            default: true
        },
        // 是否自动切换
        autoplay: {
            type: Boolean,
            default: false
        },
        // 自动切换时间间隔
        interval: {
            type: Number,
            default: 3000
        },
        // 切换动画时长
        duration: {
            type: Number,
            default: 1000
        },
        // 显示多个项
        displayMultipleItems: {
            type: Number,
            default: 2
        },
        // 下一个项的外边距
        nextMargin: {
            type: String,
            default: '0'
        },

        // 当前滑块显示项的索引
        current: {
            type: Number,
            default: 0
        },
        // 是否显示自定义指示点
        isCustomDot: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            currentDot: 0,
        }
    },
    methods: {
        // current 改变时会触发 change 事件
        change(e) {
            this.$emit('change', e.detail.current)
        },
        // 	swiper-item 的位置发生改变时会触发
        transition(e) {
            // console.log('transition:', e.detail)
            this.$emit('transition', e.detail.current)
        },
        // 	swiper-item 的位置发生改变并且动画结束时会触发
        animationfinish(e) {
            this.$emit('animationfinish', e.detail.current)
        },
        // 导航到对应页面
        handleNavTo(value) {
            // 根据实际需求实现导航逻辑
            console.log('导航到:', value)
        }
    }
}
</script>
<style lang="scss" scoped></style>