142 lines
2.7 KiB
Vue
142 lines
2.7 KiB
Vue
<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>
|