Vue-购物车系（“移动端” 例：左侧商品选项栏与右侧列表相互响应）【跟据scrollTop，offsetTop，clientHeight，基本结合使用】

在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