<template>
	<view class="page content">
		<unitv-page id="swiperPage" ref="swiperPage">
			<view>
				<unitv-zone id="zone1" class="zone1" :autoFous="true" :down="nextZone"  :item="0" :values="item1" :column="item1.length">
					<unitv-scroll>
						<unitv-item v-for="(a,index) in item1" :item="index" :key="index" class="item" @hover="hoverItem">{{a}}</unitv-item>
					</unitv-scroll>
				</unitv-zone>
			</view>
			<swiper class="swiper" :current="curSwiper">
			<swiper-item v-for="(s,index) in item1" :data-zone="'szone_'+s" :key="'s_'+index">
			<unitv-zone :id="'szone_'+s" class="zone5" up="zone1" :values="item5" :column="6" @scrolltolower="loadMore">
				<unitv-item v-for="(a,index) in item5" :item="index" :key="index" class="item">{{s}}-{{a}}</unitv-item>
			</unitv-zone>
			</swiper-item>
			</swiper>
		</unitv-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				item5: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13,14,15,16,17,18],
				curSwiper:0,
				nextZone:'szone_1'
			}
		},
		
		computed: {
		},
		onLoad() {},
		onReady() {

		},
		methods: {
			hoverItem(e){
				console.log("获得焦点："+e)
				this.curSwiper=e;
				this.nextZone='szone_'+(e+1);
			},
			clickItem(e){
				console.log("点击了："+e);
				uni.showToast({
				    title: '成功点击了',
					icon:'none',
				    duration: 2000
				});
			},
			loadMore(){
				uni.showToast({
				    title: '到达底部',
					icon:'none',
				    duration: 2000
				});
			}
		}
	}
</script>



<style>
	.content {
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 30rpx;
		margin-left: 10rpx;
	}

	.item {
		background: #d6d6d6;
		margin: 0px 10rpx;
		text-align: center;
		display: inline-block;
	}

	.zone1 {
		height: 50rpx;
		width: 100%;
		display: flex;
		white-space: nowrap;
		margin-top: 40rpx;
		    align-items: center;
	}

	.zone1 .item {
		width: 80rpx;
		height: 40rpx;
		line-height: 40px;
	}

	.swiper{
		height: 100%;
	}
	.zone5 {
		margin-top: 5rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 50rpx;
		align-items: center;
	}

	.zone5 .item {
		width: 105rpx;
		height: 135rpx;
		line-height: 115rpx;
		margin: 5rpx;
	}

	.item-hover {
		transform: scale(1.04);
		box-shadow: 2px 4px 6px #555555;
		animation: glow 1500ms ease-out infinite alternate;
		-webkit-transform: scale(1.04);
		-webkit-box-shadow: 2px 4px 6px #555555;
		-webkit-animation: glow 1500ms ease-out infinite alternate;
		background: #585dfa;
		zoom: 1.05;
	}
	.zone1 .item-active{
		zoom:0;
		background:#4CD964
	}
	.zone1 .item-hover{
		zoom:0;
		background:#DD524D
	}
	.zone5 .item-hover{
		zoom:0;
		background:#ff007f
	}
</style>
