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

<!--
 * @Author: jmy
 * @Date: 2026-01-04 12:02:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2026-01-04 15:02:20
 * @Description: 自定义轮播图组件
-->
<template>
    <swiper class="menu-swiper" :style="{ height: height * 2 + 'rpx', }" :circular="circular"
         :indicator-dots="indicatorDots" indicator-active-color=""
        indicator-color="" :autoplay="autoplay" :interval="interval" :duration="duration" :current="current"
        :display-multiple-items='displayMultipleItems' :next-margin="nextMargin" @change="change"
        @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="menu-swiper__item" v-for="(item, i) in swiperList" :key="i">
            <view class="menu-item" @click="handleNavTo(value)"
                v-for="(value, i) in item" :key="i">
                <image class="menu-item__icon" :src="value.icon" > </image>
                <view class="menu-item__name">{{ value.menuName }}</view>
            </view>
        </swiper-item>
    </swiper>
</template>
<script>
export default {
    props: {
        swiperList: {
            type: Array,
            default: () => []
        },
        // 轮播图高度rpx
        height: {
            type: Number,
            default: 76
        },
        // 是否显示指示器
        indicatorDots: {
            type: Boolean,
            default: false
        },
        // 是否循环播放
        circular: {
            type: Boolean,
            default: true
        },
        // 是否自动切换
        autoplay: {
            type: Boolean,
            default: true
        },
        // 自动切换时间间隔
        interval: {
            type: Number,
            default: 3000
        },
        // 切换动画时长
        duration: {
            type: Number,
            default: 1000
        },
        // 显示多个项
        displayMultipleItems: {
            type: Number,
            default: 1
        },
        // 下一个项的外边距
        nextMargin: {
            type: String,
            default: '0'
        },

        // 当前滑块显示项的索引
        current: {
            type: Number,
            default: 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>
.menu-swiper {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    margin-top: 5rpx;
    .menu-swiper__item {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        margin-left: 4rpx;
    }
}

.menu-item {
    margin-right: 22rpx;
    width: 104rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    &:nth-child(5n) {
        margin-right: 0;
    }
    .menu-item__icon {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
    }
    .menu-item__name {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 8rpx;
    }
}
</style>