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="scs-swiper  flex flex-nowrap mt-5" :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="flex flex-wrap h-all w-all ml-4" v-for="(item, i) in swiperList" :key="i">
            <view class="item-navbar mr-22 w-52 flex flex-column items-center" @click="handleNavTo(value)"
                v-for="(value, i) in item" :key="i">
                <image class="w-44 h-44" :src="value.icon"> </image>
                <view class=" fs-13 fw-400 text-ellipsis mt-8">{{ 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>
.scs-swiper {
    width: 100%;
    .item-navbar {
        &:nth-child(5n) {
            margin-right: 0;
        }
    }
}
</style>