baiyuApp/components/Menu.vue

<template>
	<view class="menu-list-box" v-if="carousel" :style="list.length <= menu ? `height:160rpx` : `height:320rpx`">
		<swiper
			class="menu-swiper-box"
			:style="list.length <= menu ? `height:160rpx` : `height:320rpx`"
			@change="onSwiper"
			circular
			:autoplay="false"
			:interval="3000"
			:duration="1000">
			<swiper-item class="menu-swiper-item" v-for="(itemList, index) in carousel" :key="index" :style="list.length <= menu ? `height:200rpx` : `height:340rpx`">
				<view class="menu-tab-box">
					<view class="tab-list"  v-for="item in itemList" :key="item.cateId" @tap="routerTo(item)">
						<image class="tab-img" :style="{ width: imgW + 'rpx', height: imgW + 'rpx' }" :src="item.imgUrl"></image>
						<text :class="cateId == item.cateId?'tab-title active':'tab-title'"  >{{ item.cateName }}</text>
						
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="menu-dots" v-if="carousel.length > 1">
			<text :class="menuCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in carousel.length" :key="index"></text>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			cateId:0,
			menuCurrent: 0 //轮播下标
		};
	},
	props: {
		list: {
			type: Array,
			default: []
		},
		menu: {
			default: 4
		},
		imgW: {
			type: Number,
			default: 88
		}
	},
	computed: {
		carousel() {
			if (this.list) {
				let data = this.sortData(this.list, this.menu * 2);
				return data;
			}
		}
	},
	created() {},
	methods: {
		// 数据分层
		sortData(oArr, length) {
			let arr = [];
			let minArr = [];
			oArr.forEach(c => {
				if (minArr.length === length) {
					minArr = [];
				}
				if (minArr.length === 0) {
					arr.push(minArr);
				}
				minArr.push(c);
			});
		 
			return arr;
		},
		// 轮播
		onSwiper(e) {
			this.menuCurrent = e.detail.current;
		},
		routerTo(item) {
			this.cateId=item.cateId;
			this.$emit('menuClick',item);
		},
		setCateId(cateId){
			this.cateId=cateId;
		}
	}
};
</script>

<style lang="scss">
.menu-list-box {
	padding: 0rpx;
	background: #fff;
	box-sizing: border-box;
	
}
.menu-list-box,
.menu-swiper-box {
	position: relative;
	background: #fff;
	.menu-swiper-item {
		background: #fff;
		height: 100%;
		width: 100%;
	}
	.menu-tab-box {
		display: flex;
		flex-wrap: wrap;
		.tab-list {
			width: 25%;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			padding-bottom: 30rpx;
			.tab-img {
				border-radius: 25rpx;
				margin-bottom: 10rpx;
			}
			.tab-title{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111;
				margin-top: 10rpx;
				 
			}
			.active{
				color: #2583EB;
				
			}
		}
	}
	.menu-dots {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		.dot {
			width: 40rpx;
			height: 3rpx;
			background: #eeeeee;
			margin-right: 10rpx;
		}

		.dot-active {
			width: 40rpx;
			height: 3rpx;
			background: #2583EB;
			margin-right: 10rpx;
		}
	}
}
</style>