xingmingyi_applet/pages/index/components/sh-menu.vue

<template>
	<view class="">
		<!-- 产品分类导航 -->
		<view class="menu-category-box " v-if="carousel && flag == 0" :style="detail.length <= menu ? `height:150rpx` : `height:300rpx`">
			<swiper
				class="menu-swiper-box"
				:style="detail.length <= menu ? `height:150rpx` : `height:300rpx`"
				@change="onSwiper"
				circular
				:autoplay="false"
				:interval="3000"
				:duration="1000"
			>
			<swiper-item class="menu-swiper-item" v-for="(itemList, index) in carousel" :key="index" :style="detail.length <= menu ? `height:150rpx` : `height:300rpx`">
				<view class="menu-tab-box dffs">
					<!-- :url="item.path + '?id=' + item.id" -->
					<view @click="navTo(item)" class="tab-list dffd y-f" :style="{ width: 690 / menu + 'rpx' }" v-for="(item, ind) in itemList" :key="ind">
						<image class="tab-img shopro-selector-circular" :style="{ width: imgW + 'rpx', height: imgW + 'rpx' }" :src="item.logo"></image>
						<text class="shopro-selector-rect oneelli">{{ item.name }}</text>
					</view>
				</view>
			</swiper-item>
			
			</swiper>
			<view class="menu-category-dots" v-if="carousel.length > 1">
				<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'" v-for="(dot, index) in carousel.length" :key="index"></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			categoryCurrent: 0 ,//分类轮播下标
		};
	},
	props: {
		detail: {
			type: Array,
			default: []
		},
		menu: {
			default: 5
		},
		imgW: {
			type: Number,
			default: 88
		},
		flag: {
			type: Number,
			default: 0
		}
	},
	computed: {
		carousel() {
			console.log('普通导航: ',this.detail);
			if (this.detail) {
				let data = this.sortData(this.detail, 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.categoryCurrent = e.detail.current;
		},
		navTo(item) { 
			//普通导航跳转方式
			if(item.type == 1)
			{
				if (item.url == 'notic') {
					uni.navigateTo({
						url: `/pages/news/notice?type=2&title=${item.name}`
					});
				} else if (item.url == 'vedio') {
					uni.navigateTo({
						url: `/pages/index/video/video?cat=`+item.catid
					});
				} else if (item.url == 'vacation') {
					uni.navigateTo({
						url: `/pagesA/catList/catList?cat=item.catid&title=${item.name}` 
					});
				} else {
					uni.navigateTo({
						url: `/pages/index/classList?flag=2&nav_id=${item.id}&title=${item.name}`
					});
				}
			}
			
			//独立导航跳转方式
			if(item.type == 2)
			{
				uni.navigateTo({
					url: `/pages/index/dlClassList?flag=2&nav_id=${item.id}&title=${item.name}`
				});
			}
			
			
		},
		clickthis() {
			// console.log(12);
		}
	}
};
</script>

<style lang="scss">
// 产品分类
.menu-category-box {
	width: 100%;
	padding: 10rpx 0rpx 0 0rpx;
}
.menu-category-box,
.menu-swiper-box {
	width: 100%;
	position: relative;
	.menu-swiper-item {
		height: 100%;
		width: 100%;
	}
	.menu-tab-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.tab-list {
			justify-content: flex-start;
			align-items: center;
			width: 20%;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			padding-bottom: 25rpx;
			.tab-img {
				width: 100%;
				border-radius: 50%;
				margin-bottom: 10rpx;
				padding: 10rpx;
			}
			text {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
			}
		}
	}

	.menu-category-dots {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0rpx;

		.category-dot {
			width: 25rpx;
			height: 8rpx;
			background: #eeeeee;
			border-radius: 50%;
		}

		.category-dot-active {
			width: 25rpx;
			height: 8rpx;
			background: $promain;
			border-radius: 50%;
		}
	}
}
</style>