shengxian/pages/index/category/item.vue

<template>
	<!-- 产品分类导航:style="list.length <= oneRowNum||scroll ? `height:160rpx` : `height:380rpx`" -->
	<view class="wrap">
		<view class="menu-category-box" style="height:160rpx">
			<swiper
				class="menu-swiper-box"
				@change="onSwiper"
				
				:autoplay="false"
				:interval="3000"
				:duration="1000"
			>
				<swiper-item class="menu-swiper-item" v-for="(itemList, index) in newList" :key="index">
					<view class="menu-tab-box u-flex u-flex-wrap">
						<view
							:class="(index.toString()+i.toString())==activeIndex?'tab-list u-flex-col u-col-center u-row-center active':'tab-list u-flex-col u-col-center u-row-center'"
							:style="{ width: 100 / 5 + '%' }"
							v-for="(item, i) in itemList"
							:key="i"
							@tap="getjump(item,index,i)"
						>
							<image class="tab-img" :src="item.image"></image>
							<text class="nametext">{{ item.name }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- <view class="menu-category-dots" v-if="newList.length > 1">
				<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'" v-for="(dot, index) in newList.length" :key="index"></text>
			</view> -->
		</view>
	</view>
</template>

<script>
/**
 * shGridSwiper-滑动宫格列表
 * @property {Array} list - 列表数据
 * @property {Number|String} oneRowNum - 单行数量
 */
export default {
	components: {},
	data() {
		return {
			categoryCurrent: 0 ,//分类轮播下标
			activeIndex:'00'
		};
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		oneRowNum: {
			type: [Number, String],
			default: 5
		},
		scroll:{
			type: Boolean,
			default: true
		},
		isIndex:{
			type:Boolean,
			default:true,
		},
		selectedItem:{
			type:Object,
			default:()=>{
				return {}
			}
		}
	},
	computed: {
		newList() {
			if (this.list.length) {
				// let data;
				// if(this.scroll){
				// 	data = this.$tools.splitData(this.list, this.oneRowNum * 1);
				// }else{
				// 	data = this.$tools.splitData(this.list, this.oneRowNum * 2);
				// }
				let data = this.$tools.splitData(this.list, this.oneRowNum * 1);
				// let data = this.list
				// console.log(data,"999999")
				return data;
			}
		}
	},
	methods: {
		// 轮播
		onSwiper(e) {
			this.categoryCurrent = e.detail.current;
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		getjump(item,index,i){
			console.log(item,index,i)
			// if(i){
				console.log(item,index)
				this.activeIndex = (index.toString()+i.toString());
				console.log(this.activeIndex)
			// }
			
			// if(this.isIndex){
			// 	this.$tools.routerTo(val)
			// }else{
			this.$emit("catagory",item)
			// }
			
		}
	},
	watch:{
		newList:{
			deep:true,
			handler:function(newV){
				console.log(newV,"8888")
				if(newV&&newV.length>0){
					this.getjump(this.newList[0][0],'0','0')
				}
				
			}
		},
		selectedItem:{
			deep:true,
			handler:function(newV){
				console.log(newV,"ld")
				this.newList.forEach((item,index)=>{
					if(item.include(newV)){
						console.log(index)
					}
				})
				
			}
		}
	},
	mounted() {
		this.activeIndex = '00'
		// console.log(this.newList,"8888")
		// this.getjump(this.newList[0][0],'0','0')
	}
};
</script>

<style lang="scss">
// 产品分类
.menu-category-box,
.menu-swiper-box {
	position: relative;
	background: #fff;
	height: 100%;
	.menu-swiper-item {
		background: #fff;
		height: 100%;
		width: 100%;
	}
	.menu-tab-box {
		.tab-list {
			font-size: 22rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin: 20rpx 0;
			
			.tab-img {
				width: 82rpx;
				height: 82rpx;
				margin-bottom: 10rpx;
				border-radius:20rpx;
			}
		}
	}

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

		.category-dot {
			width: 12rpx;
			height: 12rpx;
			background: #eeeeee;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.category-dot-active {
			width: 12rpx;
			height: 12rpx;
			background: #17C161;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
}
.active{
	.nametext{
		color:#ffffff;
		background-color: #17C161;
		padding: 4rpx 20rpx;
		border-radius: 20px;
	}
	image{
		border:2px solid  #17C161;
		
	}
}
</style>