在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。
<ul class="zuo">
<li v-for="(i,index) in list" :key="i.id" @click="gun(index)" :class='c==index?"li":"li1"' >
<!-- 此处判断最后赋的c值是否跟此条数据的index相等,等则高亮渲染 -->
<span>
{{i.name}}
</span>
</li>
</ul>
<ul class="you" ref="quyu" @scroll="hua()">
<li v-for="(a,index) in list" :key="a.id" >
<div class="lei-" ref="name" >{{a.name}}</div>
<div class="you-kuang" ref="shop">
<div v-for="b in a.foods" :key="b.id" class="lei-q" @click="dian(b)">
<div class="lei-q0">
<img :src='b.icon'/>
</div>
<div class="lei-q1">
<div class="lei-q1zi">{{b.name}}</div>
<div class="lei-q1zi1">{{b.description}}</div>
<div class="lei-q1zi1">月售{{b.sellCount}}份 , 评价{{b.rating}}</div>
<div class="lei-q1zi2">
<span class="lei-q1zi2-1">¥{{b.price}}</span>
<span class="lei-q1zi2-2" v-if="b.oldPrice">¥{{b.oldPrice}}</span>
</div>
</div>
<div class="lei-q2">
<!-- <span class="lei-q2x1" @click.stop="jian(b,-1)" >-</span> -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="0.8rem"
height="0.8rem" viewBox="0 0 768 768" class="lei-q2x1" fill="rgb(0,160,220)" @click.stop="jia(b, 1)">
<path
d="M544.5 415.5v-63h-129v-129h-63v129h-129v63h129v129h63v-129h129zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75z" />
</svg>
<span class='hua' v-if="ddd">+++</span>
<span v-if="b.num>0?true:false">{{b.num}}</span>
<!-- <span class="" @click.stop="jia(b,1)">+</span> -->
<svg xmlns="http://www.w3.org/2000/svg" v-if="b.num>0?true:false" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="0.8rem"
height="0.8rem" viewBox="0 0 768 768" class="lei-q2x1" fill="rgb(0,160,220)" @click.stop="jian(b, -1)" >
<path
d="M384 640.5q105 0 180.75-75.75t75.75-180.75-75.75-180.75-180.75-75.75-180.75 75.75-75.75 180.75 75.75 180.75 180.75 75.75zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75zM223.5 352.5h321v63h-321v-63z" />
</svg>
</div>
<div>
</div>
</div>
</div>
</li>
</ul>
如上代码为布局代码,可参照 ref 位置。封面有标注
//scrollTop等于是当前ref位置超过外层元素框的值,offsetTop内层元素距外层元素头部的距离
//clientHeight仅仅包含内边距+高度
gun(index) {
this.$refs.name.forEach((v,c) => { //(依据,每个循环里的li里都有一个name)
// console.log(v)
if (c == index) { //通过c值和点击传过来的下标判断
//scrollTop等于是当前ref位置超过外层元素框的值,offsetTop内层元素距外层元素头部的距离
this.$refs.quyu.scrollTop = v.offsetTop - 0
//此时的v.offserTop值就等于对应name距离外部元素顶的距离,此值为超出外部元素的值,赋给外部元素,让里的距离超出对应的值
this.konggun = c
//konggun=c值 给每个区域都给定义一个c值
console.log(v.offsetTop)
console.log(this.$refs.quyu.scrollTop)
}
})
this.dong = false
this.c=index
// console.log(this.c)
},
hua(){
console.log(this.$refs.name[this.konggun].offsetTop)
Math.floor(this.$refs.quyu.scrollTop) == this.$refs.name[this.konggun].offsetTop - 0 ?this.dong=true:''
//!!! -0 可跟据页面调动
//判断此时超过顶部位置的距离,是否等于,这个ref(name)到顶部的距离。若等于则dong定义为true
if(this.dong){ //进行判断
this.$refs.name.forEach((v,k)=>{
let biao=Math.ceil(this.$refs.quyu.scrollTop)//向上取整此时超过顶部的距离
let min=this.$refs.name[k].offsetTop-0//获取ref(name)到顶部的距离
// console.log(min)
//clientHeight仅仅包含内边距+高度
let max = this.$refs.name[k].offsetTop - 0 + this.$refs.shop[k].clientHeight
//获取到当前ref(name)的值到顶部 和 ref(shop)的内边距和高度 的总和 !!!来断定一片区域
if(biao>=min&&biao<=max){ //判断滑动超出的距离,跟头部和总高的尾部来计算。若在此范围,将k(所在区域的下标值)给到c
this.c=k
}
})
}
console.log(this.c)
}
若有疑问,欢迎在评论区提出ヾノ≧∀≦)o