vue 楼层
2021-04-20 本文已影响0人
大梦无痕
image.png
<template>
<div class="home" v-loading="loading" ref="contentbox">
<heads></heads>
<div class="warapp">
<div class="fixed" v-show="scrollTop>100">
<div :class="navIndex==inx?'li active':'li'" v-for="(item,inx) in goods" :key="inx" @click="floorNav('list'+inx,inx)">{{item.title}}</div>
</div>
<div class="goods-list">
<div class="xlist" v-for="(item,inx) in goods" :key="inx" :ref="'list'+inx">
<!-- 显示样式1 -->
<div class="type1" v-if="item.type==1">
<div class="tit">{{item.title}}</div>
<div class="list">
<div class="listItem" v-for="item1 in item.list" :key="item1.id">
<router-link class="link" to="/">
<img :src="item1.img" class="goodImg" :alt="item1.goodsName">
</router-link>
<div class="listItemHover">
<div class="tith">{{item1.tag}}</div>
<div class="sub">{{item1.goodsName}}</div>
</div>
</div>
</div>
</div>
<!-- 样式2 -->
<div class="type2" v-if="item.type==2">
<div class="tit">{{item.title}}</div>
<div class="list">
<div class="listItem" v-for="item1 in item.list" :key="item1.id">
<router-link class="link" to="/">
<div class="listItemHover">
<div class="tith">{{item1.tag}}</div>
<div class="sub">{{item1.goodsName}}</div>
<div class="boxImg">
<img :src="item1.img" class="goodImg" :alt="item1.goodsName">
</div>
</div>
</router-link>
</div>
</div>
</div>
<!-- 样式3 -->
<div class="type3" v-if="item.type==3">
<div class="tit">{{item.title}}</div>
<div class="list">
<div class="listItem" v-for="item1 in item.list" :key="item1.id">
<router-link class="link" to="/">
<div class="listItemHover">
<div class="boxImg">
<img :src="item1.img" class="goodImg" :alt="item1.goodsName">
</div>
<div class="sub">{{item1.goodsName}}</div>
<div class="tith">{{item1.tag}}</div>
<div class="price">￥{{item1.price}}</div>
</div>
</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
<div ref="tops" class="tops" style="height:1px"></div>
</div>
</template>
<script>
export default{
components:{},
data(){
return {
loading:true,
scrollTop:0,
goods:[],//楼层数据
navIndex:0,//当前的index
maxIndex:100,//当前点击的index 用于判断滚动超出时超过当前index(动画过度) 100 大于当前楼层length就ok
}
},
methods:{
init(){
this.goods = [];
var num = parseInt(Math.random()*12)+3;
for(var i=0;i<num;i++){
var num1 = parseInt(Math.random()*16)+3;
var list = [];
for(var j=0;j<num1;j++){
list.push({
goodsName:"2021新款40支13372全棉双拼羽毛刺绣四件套 1.5m床单款四件套 月光蓝+姜黄"+(j+1)*(i+1),
tag:"暖柚家纺"+j,
img:"http://qiniu.zhaojiafang.com/data/upload/shop/rec_position/656a10be8aad391a8122.jpg",
price:parseInt(Math.random()*200000),
id:parseInt(Math.random()*20000000000),
})
}
this.goods.push({
type:parseInt(Math.random()*3)+1,
list:list,
title:"实力品牌"+i
})
}
},
handleScroll(e){
this.scrollTop = this.$refs.contentbox.scrollTop;
if(this.maxIndex!=100){
var top = this.$refs['list'+this.maxIndex][0].offsetTop;
if(this.maxIndex>this.navIndex){
//向下
if(this.scrollTop<=top){
this.navHover(this.scrollTop);
}
}else{
//向上
if(this.scrollTop>=top){
this.navHover(this.scrollTop);
}
}
}else{
this.navHover(this.scrollTop);
}
},
navHover(scrollTop){
for(var i=0;i<this.goods.length;i++){
var name = "list"+i;
var top = this.$refs[name][0].offsetTop;
if(scrollTop>=top){
this.navIndex = i;
}
}
},
//滚动条动画
animate(max,inx){
var times = 500;
var step = (max - this.$refs.contentbox.scrollTop)/10;
var Maxheight = this.$refs.tops.offsetTop-document.documentElement.clientHeight + 1;//滚动条距离顶部的最大的高度
var time = setInterval(() => {
if(step>0){
if(this.$refs.contentbox.scrollTop>=max||this.$refs.contentbox.scrollTop>=Maxheight){
this.$refs.contentbox.scrollTop = max;
this.navIndex = inx;
clearInterval(time);
this.maxIndex = 100;
}else{
this.$refs.contentbox.scrollTop +=step;
}
}else{
if(this.$refs.contentbox.scrollTop<=max){
this.$refs.contentbox.scrollTop = max;
clearInterval(time);
this.maxIndex = 100;
}else{
this.$refs.contentbox.scrollTop = this.$refs.contentbox.scrollTop + step;
}
}
}, 50);
},
floorNav(name,inx){
var maxTime = 500;//滚动时间
this.maxIndex = inx;
if(this.navIndex!=inx){
this.animate(this.$refs[name][0].offsetTop,inx);
}
}
},
created(){
},
mounted(){
this.init();
setTimeout(() => {
window.addEventListener('scroll', this.handleScroll, true);
}, 500);
}
}
</script>
<style lang=scss scoped>
.fixed{
position: fixed;
top: 105px;
left: 50%;
margin-left: -660px;
background: #f3f2f2;
z-index: 10;
.li{
width: 40px;
color: #999;
font-size: 12px;
line-height: 18px;
text-align: center;
padding: 4px;
box-sizing: border-box;
border-bottom: 1px dotted #d1d1d1;
cursor: pointer;
}
.li:hover{
background: #f00;
color: #fff;
}
.li.active{
background: #f00;
color: #fff;
}
}
.home{
background: #fff;
height: 100%;
overflow: auto;
}
.main{
display: flex;
height: 600px;
background: #fff;
.menu{
width: 212px;
position: relative;
.menuTit{
background: #F92C66;
color: #fff;
font-size: 14px;
height: 36px;
line-height: 36px;
padding: 0 10px;
.icons{
font-size: 18px;
vertical-align: middle;
}
}
.ul{
background: linear-gradient(180deg, #fd3f75, #fd264c);
height: calc(100% - 36px);
overflow: auto;
.li{
padding: 10px;
display: flex;
color: #fff;
font-size: 14px;
transition: all 0.5s;
.lit{
flex: auto;
.them{
cursor: pointer;
.icon{
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: #f5f5f5;
margin-right: 6px;
}
}
.sub{
padding-left: 26px;
margin-top: 6px;
font-size: 12px;
span{
cursor: pointer;
margin-right: 4px;
color:rgba(236, 236, 236, 0.85) ;
transition: all 0.2s;
}
span:hover{
color: #fff;
}
}
}
.icont{
i{
font-size: 18px;
}
}
}
.menuLayer{
position: absolute;
left: 212px;
top: 36px;
bottom: 0;
width: 988px;
box-shadow:0 0 4px 0 rgba(0,0,0,0.2) ;
display: none;
padding: 20px;
box-sizing: border-box;
z-index: 1000;
background: #fff;
.item{
margin-bottom: 20px;
.tit{
font-size: 14px;
color: #222;
font-weight: 900;
line-height: 20px;
}
.sub1{
font-size: 12px;
color: #999;
margin-top: 10px;
span{
cursor: pointer;
margin-right: 24px;
transition: all 0.2s;
}
span:hover{
color: #fd264c;
}
}
}
}
.li:hover{
background: rgba(255,255,255,0.3);
.menuLayer{
display: block;
}
}
}
}
.box{
height: 100%;
width: calc(100% - 212px);
position: relative;
z-index: 1;
.nav{
height: 36px;
line-height: 36px;
display: flex;
flex-wrap: wrap;
padding: 0 20px;
border-bottom: 2px solid #fd3f75;
.navItem{
margin-right: 20px;
font-size: 14px;
font-weight: 400;
color: #222;
transition: all 0.2s;
cursor: pointer;
}
.navItem:hover{
color: #fd3f75;
}
}
}
.centent{
height:calc(100% - 38px);
width: 100%;
display: flex;
flex-wrap: wrap;
.swiper{
width: calc(100% - 200px);
position: relative;
z-index: 1;
height: 400px;
.swiper-container{
width: 100%;
height: 100%;
}
}
.user{
width: 200px;
box-sizing: border-box;
height: 400px;
.us{
height: 80px;
display: flex;
padding: 20px 20px 0 20px;
.img{
width: 60px;
height: 60px;
background: #f5f5f5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
i{
font-size: 40px;
color: #999;
}
}
.ust{
padding-left: 12px;
font-size: 12px;
display: flex;
align-items: center;
flex-direction: column;
color: #444;
.text{
margin-top: 10px;
}
a{
color: #444;
}
}
}
}
.active{
img{
width: 100%;
height: 99px;
margin-top: 1px;
cursor: pointer;
}
}
.hot{
width: 100%;
height: 162px;
padding: 4px;
box-sizing: border-box;
.swiper-container{
width: 100%;
height: 100%;
.img{
cursor: pointer;
height: 120px;
}
.title{
font-size: 14px;
height: 30px;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
transition: all 0.25s;
cursor: pointer;
}
.swiper-slide:hover{
.title{
color: #F92C66;
}
}
}
}
}
}
.goods-list{
padding-top: 40px;
overflow: hidden;
.xlist{
margin-bottom:20px ;
.type1{
.tit{
font-size: 24px;
font-weight: 900;
line-height: 60px;
color: #4e4c4c;
text-align: center;
}
.list{
display: flex;
align-items: center;
flex-wrap: wrap;
.listItem{
width: calc(33.3333% - 10px);
margin-right: 15px;
margin-bottom: 15px;
position: relative;
height: 215px;
overflow: hidden;
.link,.goodImg{
display: block;
width: 100%;
min-height: 100%;
}
.listItemHover{
position: absolute;
left:0;
bottom: -50%;
width: 100%;
height: 50%;
background: rgba(0,0,0,0.75);
z-index: 100;
padding: 20px;
box-sizing: border-box;
transition: all 0.5s;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.tith{
font-size: 18px;
font-weight: 900;
color: #fff;
line-height: 24px;
}
.sub{
font-size: 16px;
color: #fff;
line-height: 20px;
margin-top: 10px;
}
}
}
.listItem:nth-child(3n){
margin-right: 0;
}
.listItem:hover{
.listItemHover{
bottom: 0;
}
}
}
}
.type2{
.tit{
font-size: 24px;
font-weight: 900;
line-height: 60px;
color: #222;
text-align: center;
}
.list{
display: flex;
align-items: center;
flex-wrap: wrap;
.listItem{
width: calc(25% - 3px);
margin: 0 4px 5px 0;
.link{
display: block;
width: 100%;
padding: 0 2px;
box-sizing: border-box;
.listItemHover{
padding: 5px;
text-align: center;
box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
border-top: 1px solid #ffac13;
.tith{
color: #ffac13;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.sub{
height: 24px;
line-height: 24px;
margin: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-size: 14px;
color: #b0b0b0;
}
.boxImg{
width: 100%;
height: 283px;
overflow: hidden;
}
.goodImg{
width: 100%;
height: 100%;
transform: scale(1.1);
transition: all 0.5s;
}
}
.listItemHover:hover{
.goodImg{
transform: scale(1);
}
}
}
}
.listItem:nth-child(4n){
margin-right: 0;
}
}
}
.type3{
.tit{
font-size: 24px;
font-weight: 900;
line-height: 60px;
color: #222;
text-align: center;
}
.list{
display: flex;
align-items: center;
flex-wrap: wrap;
.listItem{
width: calc(20% - 5px);
margin: 0 4px 5px 0;
background: #f5f5f5;
padding: 10px;
box-sizing: border-box;
text-align: center;
.boxImg{
height:215px;
}
.tith{
font-size: 12px;
background: #fee6e5;
margin: 0 auto;
padding: 2px 8px;
border-radius: 10px;
color: #f5534c;
display: inline-block;
}
.sub{
height: 24px;
line-height: 24px;
margin: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-size: 14px;
color: #6c6c6c;
transition: all 0.3s;
}
.price{
color: #fc4a00;
font-size: 15px;
line-height: 20px;
margin-top: 4px;
}
}
.listItem:nth-child(5n){
margin-right: 0;
}
.listItem:hover{
.sub{
color: #f5534c;
}
}
}
}
}
}
</style>
