先看看效果图:

没有滚动的时候:

鼠标向下滚动高度超过200时显示导航分类:

鼠标放在商品分类上显示更多分类(鼠标移出隐藏):

接下来看详细代码步骤:

首先定义导航分类及更多分类:

解析:在data里边定义navTab和fenLei默认状态为false(隐藏状态)

@mouseenter="onMouseOver"和@mouseleave="onMouseout"分别为商品分类上鼠标移入移出事件

最后就是实现这个功能的方法,如下:

mounted () {
   window.addEventListener('scroll', this.handleScroll)
},
handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop > 500){
          this.tabNav = 1;
        }else if(scrollTop < 500) {
          this.tabNav = 0;
        }
},

至此功能实现完毕!!!

 

 

Logo

前往低代码交流专区

更多推荐