<template>
<div>
<header :style="{background:all.window.navigationBarBackgroundColor}" v-if="all.ext.attr.searchEnable">
<p @click="search">
<i class="iconfont icon" style="font-size: 0.3rem"></i>
<span>搜索商品</span>
</p>
</header>
<!-- tab-container -->
<div class="content">
<ul class="sort_left" @click="select">
<li v-for="(item,key) in sortsList" @click="jump(key)">{{item.name}}</li>
</ul>
<div class="sort_right" ref="rightList">
<div v-for="(item,key) in sortsList" class="cate_item">
<p class="title">- {{item.name}} -</p>
<ul>
<li v-for="list in item.goods">
<img :src="list.pic" alt="" style="width: 42vw;max-height: 100%">
<p style="margin-top: 0.25rem">{{list.name}}</p>
<p>¥{{list.price}}</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return {
color:"blue",
isActive:'',
itemVal:[],
container:[]
}
},
methods:{
search(){
},
select(){
const lis = document.getElementsByClassName('sort_left')[0].getElementsByTagName('li');
let arr = Array.from(lis);
arr.forEach(item => {
item.style.color = 'black';
item.className = '';
item.style.borderLeftColor = 'white';
});
event.target.className = 'active';
event.target.style.color = this.all.window.navigationBarBackgroundColor;
event.target.style.borderLeftColor = this.all.window.navigationBarBackgroundColor;
},
jump(index){
const anchor = document.querySelectorAll('.cate_item');
let total = anchor[index].offsetTop - anchor[0].offsetTop;
let distance = this.$refs.rightList.scrollTop;
let _this = this;
let step = total / 50;
this.isActive = index;
if (total > distance) {
smoothDown()
} else {
let newTotal = distance - total;
step = newTotal / 50;
smoothUp()
}
function smoothDown () {
if (distance < total) {
distance += step;
_this.$refs.rightList.scrollTop = distance;
setTimeout(smoothDown, 10);
} else {
_this.$refs.rightList.scrollTop = total
}
}
function smoothUp () {
if (distance > total) {
distance -= step;
_this.$refs.rightList.scrollTop = distance;
setTimeout(smoothUp, 10)
} else {
_this.$refs.rightList.scrollTop = total
}
}
},
onScroll(){
let top = this.$refs.rightList.scrollTop;
let _this = this;
this.itemVal.forEach(function(obj, i){
if(top >= obj.top && top < (obj.top + obj.height - 10)){
// scrollTop的移动位置要在类别的菜品列表中才显示对应锚点的当前状态
const lis = document.getElementsByClassName('sort_left')[0].getElementsByTagName('li');
let arr = Array.from(lis);
arr.forEach(item => {
item.style.color = 'black';
item.className = '';
item.style.borderLeftColor = 'white';
});
arr[obj.index].className = 'active';
arr[obj.index].style.color = _this.all.window.navigationBarBackgroundColor;
arr[obj.index].style.borderLeftColor = _this.all.window.navigationBarBackgroundColor;
}
});
},
// 改变状态
changeState(index){
const lis = document.getElementsByClassName('sort_left')[0].getElementsByTagName('li');
let arr = Array.from(lis);
arr.forEach(item => {
item.style.color = 'black';
item.className = '';
item.style.borderLeftColor = 'white';
});
lis[index].className = 'active';
lis[index].style.color = this.all.window.navigationBarBackgroundColor;
lis[index].style.borderLeftColor = this.all.window.navigationBarBackgroundColor;
}
},
computed:{
all () {
return this.$store.getters.getAll;
},
sortsList () {
return this.$store.getters.getSortsGoods;
},
},
mounted () {
const lis = document.getElementsByClassName('sort_left')[0].getElementsByTagName('li');
if(lis !== undefined){
lis[0].className = 'active';
lis[0].style.color = this.all.window.navigationBarBackgroundColor;
lis[0].style.borderLeftColor = this.all.window.navigationBarBackgroundColor;
}
this.$nextTick(function () {
//dom已更新
const rightItem = document.querySelectorAll('.cate_item');
const cateList = this.$refs.rightList;
let length = rightItem.length;
let height = rightItem[length-1].offsetHeight;
let scrollHeight = cateList.offsetHeight;
if(height < scrollHeight){
rightItem[length-1].style.height = scrollHeight+'px';
}
let arr =[];
rightItem.forEach(function(v, i){
arr.push({top: v.offsetTop - rightItem[0].offsetTop, height: v.offsetHeight, index: i});
});
this.itemVal = arr;
cateList.addEventListener('scroll', this.onScroll);
this.container = cateList;
})
}
}
</script>
<style scoped>
header{
top:50px;
height: 50px;
background: #2196f3;
display: flex;
justify-content: center;
align-items: center;
}
header>p{
width: 90vw;
padding: 0.12rem 0.1rem;
background-color: #ffffff;
border-radius: 0.1rem;
margin-bottom: 5px;
text-align: center;
color: #8a9aa7;
}
.content{
display: flex;
}
.sort_left{
flex:0 1 20vw;
}
.sort_left>li{
height:50px;
line-height: 50px;
text-align: center;
background-color: #ffffff;
cursor: pointer;
}
.active{
border-left: 5px solid #2196f3;
background-color: #f6f6f6!important;
/*color: #2196f3;*/
font-weight: 600;
}
.sort_right{
height: calc(100vh - 150px);
overflow-y: auto;
flex:1;
}
.sort_right::-webkit-scrollbar{
width: 5px;
height: 5px;
background-color: #f6f6f6;
}
.sort_right::-webkit-scrollbar-thumb{
/*width: 10px;*/
height: 5px;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);
background-color: #f6f6f6;
}
.title{
height:50px;
line-height: 50px;
text-align: center;
font-weight: 600;
}
</style>
