淘宝侧边栏鼠标滑动功能实现

最新推荐文章于 2022-09-09 20:15:13 发布
最新推荐文章于 2022-09-09 20:15:13 发布
阅读量515 收藏 4
点赞数
分类专栏： Nuxt.js 功能需求 文章标签： 前端 node.js vue.js javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/handsomezhanghui/article/details/108234867
版权

在这里插入图片描述

简介
在项目开发过程中遇到了一个实现淘宝侧边栏的功能，这个功能想了半天，最终还是做出来了，

其实也没那么复杂，主要是数据解构设计的合理即可，效果：鼠标移动到不同的列表项右边显示不同的效果 技术栈：nuxt.js

具体如下效果如下所示

在这里插入图片描述

实现原理
其实，实现原理也很简单，一边是左边列表项，一边是展示区 用两个容器包裹即可
鼠标移到左边列表项得到其对应的唯一type类型，拿到type类型展示数据即可，逻辑就这么简单
HTML代码
  <div class="m-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd v-for="(item, index1) in menu" :key="index1" @mouseenter="enter">
        <i :class="item.type" />
        {{item.name}}
        <span class="arrow" />
      </dd>
      <div v-if="kind" class="detail" @mouseenter="sover" @mouseleave="sout">
        <div v-for="(item,index2) in curdetail.child" :key="index2">
          <h4>{{item.title}}</h4>
          <span v-for="(child, index3) in item.child" :key="index3">{{child}}</span>
        </div>
      </div>
    </dl>
  </div>
CSS代码
  .m-menu {
        width: 230px;
        height: 475px;
        box-sizing: border-box;
        margin-top: -50px;
        margin-left: 20px;
        color: #FFF;
        position: relative;
        background: linear-gradient(-180deg, rgba(2, 181, 157, .85) 2%, rgba(22, 146, 183, .85) 100%);
        dt {
            height: 50px;
            padding-top: 15px;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: 400;
            margin-left: 15px;
        }
        dd {
            position: relative;
            box-sizing: border-box;
            padding: 2px 12px;
            height: 26px;
            cursor: pointer;
            &:hover {
                background: rgba(255, 255, 255, .2);
                &>i {
                    opacity: 1;
                }
            }
        }
        .nav {
            dd>i {
                font-family: 'meituan';
                font-size: 14px;
                font-style: normal;
                opacity: 0.3;
                margin-right: 11px;
                &:before {
                    width: 14px;
                    height: 14px;
                    display: inline-block;
                }
            }
            .food {
                &:before {
                    content: "\e622";
                }
            }
            .takeout {
                &:before {
                    content: "\e630";
                }
            }
            .hotel {
                &:before {
                    content: "\e62a";
                }
            }
            .homestay {
                &:before {
                    content: "\e631";
                }
            }
            .movie {
                &:before {
                    content: "\e62c";
                    position: relative;
                    left: -2px;
                }
            }
            .airport {
                &:before {
                    content: "\e632";
                }
            }
            .ktv {
                &:before {
                    content: "\e627";
                }
            }
            .life {
                &:before {
                    content: "\e633";
                }
            }
            .hair {
                &:before {
                    content: "\e626";
                    transform: scale(0.7);
                }
            }
            .marry {
                &:before {
                    content: "\e629";
                }
            }
            .offspring {
                &:before {
                    content: "\e623";
                }
            }
            .sport {
                &:before {
                    content: "\e62b";
                }
            }
            .furniture {
                &:before {
                    content: "\e625";
                }
            }
            .study {
                &:before {
                    content: "\e624";
                }
            }
            .health {
                &:before {
                    content: "\e628";
                }
            }
            .bar {
                &:before {
                    content: "\e621";
                }
            }
            .arrow {
                width: 4px;
                height: 4px;
                border-bottom: 1px solid #fff;
                border-right: 1px solid #fff;
                transform: rotate(-45deg);
                display: block;
                position: absolute;
                right: 13px;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        }
        .detail {
            padding: 0 30px;
            position: absolute;
            left: 230px;
            bottom: 0;
            width: 400px;
            height: 416px;
            background: #fff;
            z-index: 9999;
            h4 {
                margin-top: 24px;
                height: 22px;
                line-height: 22px;
                padding-bottom: 10px;
                border-bottom: 1px solid #e5e5e5;
            }
            span {
                color: #999;
                font-size: 12px;
                line-height: 15px;
                display: inline-block;
                margin-right: 16px;
                margin-top: 10px;
                cursor: pointer;
                &:hover {
                    color: #31BBAC;
                }
            }
        }
    }
JavaScript逻辑代码
  data() {
    return {
      kind: '',
      menu: [
        {
          type: 'food',
          name: '美食',
          child: [
            {
              title: '美食',
              child: ['代金券', '甜点', '小吃', '快餐', '外卖', '油泼辣子面'],
            },
          ],
        },
        {
          type: 'takeout',
          name: '外卖',
          child: [
            {
              title: '外卖',
              child: [
                '肉夹馍',
                '火腿',
                '火烧',
                '尖椒肉丝',
                '葱花鸡蛋',
                '酱猪蹄',
              ],
            },
          ],
        },
        {
          type: 'hotel',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'homestay',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'movie',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'airport',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'ktv',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'life',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'hair',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'marry',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'offspring',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'sport',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'furniture',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'study',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'health',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
        {
          type: 'bar',
          name: '酒店',
          child: [
            {
              title: '酒店',
              child: [
                '4星级酒店',
                '5星级酒店',
                '3星级酒店',
                '2星级酒店',
                '2星级酒店',
              ],
            },
          ],
        },
      ],
    }
  },
  computed: {
    curdetail() {
    //进行过滤
      return this.menu.filter((item) => item.type === this.kind)[0]
    },
  },
  mounted() {},
  methods: {
    mouseleave() {
    //延迟
      this._timer = setTimeout(() => {
        this.kind = ''
      }, 150)
    },
    enter(e) {
    //拿到移动的class
      this.kind = e.target.querySelector('i').className
    },
    sover() {
    //清除
      clearTimeout(this._timer)
    },
    sout() {
      this.kind = ''
    },
  },
 //熟悉vue项目的都能看懂

谢谢观看，如有不足，敬请指教

ZhandsomeZ
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js左侧边导航菜鼠标悬停展开二级菜单导航
11-20
js左侧边导航菜鼠标悬停展开二级菜单导航
css3仿天猫侧边栏
BetterBOB的专栏
05-28 2826
演示：http://jsfiddle.net/Adce2/ 主要思路：  1， 首先画出侧边栏的html。  2， 利用css3属性分别为close sidebar-content添加显示和隐藏的动画。  3， 利用css3的keyframes来定义动画的样式。
JavaScript-227：仿淘宝固定侧边栏
臧小川的博客
05-05 164
效果图 结构 <div class="slide-bar"> <span class="goBack">返回顶部</span> </div> <div class="header">头部区域</div> <div class="banner">banner区域</div> <div class="main">主体区域</div>..
HTML+CSS+JS案例展示(仿淘宝侧边栏效果)
weixin_42541725的博客
02-11 930
仿淘宝侧边栏效果js_subnav
element组件：点击侧边栏，切换右侧内容
qq_39389646的博客
09-21 6911
侧边栏，远程加载了页面的头部 <template> <div> <Head></Head> <div class="menuMain" style="width: 20%;float: left"> <el-container> &...
b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝固定侧边栏
weixin_72322475的博客
09-09 730
b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝固定侧边栏
JS制作~淘宝固定侧边栏
qq_64970126的博客
05-08 420
JS制作~淘宝固定侧边栏
淘宝左侧分类导航代码
02-02
淘宝左侧分类导航代码，喜欢的朋友可以下载
仿淘宝侧边栏的完整购物网站
01-07
做的一个购物网站，类似于淘宝。侧边栏选择商品更是模仿淘宝完成的。用的VS2010+MSSQL2008
JS 仿淘宝固定右侧侧边栏(可返回顶部)案例
qq_49900295的博客
03-25 1880
我们先看一下淘宝的侧边栏： 功能需求 1.原先侧边栏是绝对定位 2.当页面滚动到一定位置，侧边栏改为固定定位 3.页面继续滚动，会让返回顶部显示出来 比如说这是我们的页面： 当被页面卷去的部分刚好为header高度时，我们就将右侧侧边栏改为固定定位 当页面滚动到main主体部分时，让侧边栏显示返回顶部字样，点击返回顶部可以通过缓动动画滑到顶部 案例分析： 1.需要用到页面滚动事件scroll因为是页面滚动，所以事件源是document 2.滚动到某个位置，就是判断页面被卷去的上部值。 3.页面被卷去的头
鼠标滑过向上滚动图片效果淘宝代码
08-11
1、登陆店铺管理后台，选择“店铺装修”，复制下面的鼠标代码，选择首页中您要自定义的内容区，点击“编辑”。 2、进入编辑器，将“鼠标滑过代码”粘贴在相应位置。 3、再将您宝贝的图片地址、图片经过地址、宝贝链接地址，替换掉代码中的对应地址，点击“保存”。 4、最后在弹出的发布窗口中，点击“确认发布”。
后台左侧折叠菜单导航
01-12
网站后台左侧折叠菜单并且具有缓冲效果，更人性化，看起来有平滑的感觉，需要找类似jQuery效果的朋友不妨看看，也许对你所需的代码有帮助。
jQuery侧边栏菜单滑动展开代码
06-24
jQuery侧边栏菜单滑动展开代码是一款基于bootstrap框架制作的网页左侧边栏下拉菜单特效。
jQuery侧边栏滑动导航菜单代码
06-24
jQuery侧边栏滑动导航菜单代码是一款支持PC端跟手机端同时使用的导航菜单特效。
滑动侧边栏SlideMenu
06-30
android滑动侧边栏SlideMenu。采用继承ViewGroup实现。
Android实现滑动侧边栏
08-28
主要为大家详细介绍了Android实现滑动侧边栏效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现侧边栏 —— 仿淘宝固定侧边栏
爱前端的程序媛的博客
03-17 3270
固定侧边栏的效果：当页面滑到banner部分时，侧边栏就变成固定定位，不再跟随滚动条往下走；页面再往下滑动，到主体部分时返回顶部的部分显示，否则隐藏。 页面的结构，搭建的比较简单，主要是为了实现js效果的。 具体详细的步骤代码部分有注释的哈。 JS部分： // 需求：1.当页面划到banner部分时 侧边栏保持位置不变 没到banner区域时侧边栏跟着页面滑动 // 2...
淘宝侧边栏下滑页面固定案例
weixin_52212950的博客
03-20 1292
在淘宝页面中，我们右侧的侧边栏在下滑过一定距离后，会变为固定样式固定在屏幕右侧位置，再下滑一定距离后侧边栏会多出一个回到顶部的盒子，在往上滑动后又恢复原样，我们如何实现这个案例呢？ 案例效果如下： 下拉前： 此时侧边栏为绝对定位定在右侧，滑动滚动条会跟随移动 下拉过第一个盒子的高度后： 再往下滑动过第二个盒子顶部后就会固定在这个位置不再变化 （变为固定定位） 下拉过第二个盒子的高度后： 再往下滑动过第三个盒子的顶部后 ，侧边栏就会多出回到顶部的盒子，点击可以回到顶部 ..
仿淘宝侧边栏 js代码
m0_47294990的博客
07-28 228
<script> //先获取侧边栏 var sliderbar = document.querySelector('.slider-bar'); //获取banner var banner = document.querySelector('.banner'); //把banner距离上滚动 作为一个灵活的变量存储 bannerTop就是距离顶部的距离 var bannerTop = banner.
js实现侧边栏滑动效果
最新发布
06-02
实现侧边栏滑动效果的方法有很多，以下是其中一种基于 JavaScript 和 CSS 的方法： HTML 结构： ```html <!-- 侧边栏内容 --> <!-- 主体内容 --> <button class="toggle-btn">Toggle Sidebar ``` CSS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值