【vue】点餐菜单：滚动锚点

最新推荐文章于 2023-06-08 17:03:14 发布

longlongfishday

最新推荐文章于 2023-06-08 17:03:14 发布

阅读量535

点赞数

分类专栏： vue 前端 JQ 文章标签： vue js

本文链接：https://blog.csdn.net/m0_37715455/article/details/117637052

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

Q：为实现菜单一样点击左侧菜单右侧滚动到对应分类菜品，滚动右侧菜品左侧菜单导航显示到对应分类

①点左侧菜单导航滚动到对应分类菜品

<div v-for="(item,index) in menuleft" :key="index" 
        @click.stop="handleItem(index)">{{item}}</div>

注意：dom为每个分类层次的div，每个分类对应id为：n_menu

※要记得最外层的rightTop赋个相对样式：

#rightTop {

position: relative;

}

      handleItem(index){
        this.activeIndex = index;//当前点击index赋值，用于选中样式显示
        let height = document.getElementById("rightTop").scrollTop;//右侧菜品框顶部id为rightTop
        //指定dom到rightId顶端的距离
        let dom = document.getElementById(this.activeIndex+ "_menu");
        let domHeight = dom.offsetTop;
        console.log(height, domHeight);
        document.getElementById("rightTop").scrollTop = domHeight;//滚动到对应位置
      },

②滚动右侧菜品左侧菜单导航显示到对应分类

<div class="right" id="rightTop" @scroll="scrollEvent">

scrollList 为存储的右侧分类的高度[{id:xxx}] 以此判断该到哪个分类标签了

        for (let i = 0; i < this.scrollList.length; i++) {
          if (i > 0) {
            if (
              document.getElementById("rightTop").scrollTop <
                this.scrollList[i].idx &&
              document.getElementById("rightTop").scrollTop + 100 >
                this.scrollList[i - 1].idx
            ) {
              //样式选中
              this.activeIndex = i - 1;
            }
            if( parseInt(document.getElementById("rightTop").scrollTop)+ Number(document.getElementById("rightTop").clientHeight)== Number(document.getElementById("rightTop").scrollHeight)){
                // console.log("当前为最后一个=============",i);
                this.activeIndex = i;
            }
          }
        }