vue实现导航器效果【vue+less+适配效果】

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难

在这里插入图片描述

🔎 了解博主

  1. 📢 个人简介: 哈喽！小伙伴们，我是水香木鱼，水瓶座一枚 😜 来自于黑龙江 庆安
  2. 🏡 本站首页: 水香木鱼
  3. 🚀 博客主页: 陈春波 👉 开源博客模板【纯前端开发-Vue3+TS+Ant Design of Vue】，来 Star⭐Gitee吧 ! 拥有属于我们自己的 Blog。
  4. 🎨 系列专栏：后台管理系统
  5. 📖 人生格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
  6. 🌏 小目标: 成为前端布道师

本期带来的是导航器效果 直奔主题👇

📑 文章内容

在这里插入图片描述

1、内容区域

    <div class="block">
      <div class="title" ref="anchor0">平台硬件</div>
      <div class="content">
        <div class="outer44"></div>
      </div>
    </div>
    <div class="block">
      <div class="title" ref="anchor1">平台软件</div>
      <div class="content">
        <div class="outer44"></div>
      </div>
    </div>
    <div class="block">
      <div class="title" ref="anchor2">解决方案</div>
      <div class="content">
        <div class="outer44"></div>
      </div>
    </div>
    <div class="block">
      <div class="title" ref="anchor3">核心优势</div>
      <div class="content">
        <div class="outer44"></div>
      </div>
    </div>

2、导航器 event 区域

  • scrollTo:(点击事件)
  • ‘anchor0’:(关联内容区域,显示对应的导航内容)
  • el-icon-monitor:(为element icon图标),可在main.js 中全局引入,即可使用。【不限于i标签,可在p、span等标签中使用】
<div class="nav-fixed">
      <div class="flex-row" @click="scrollTo('anchor0')">
        <i class="el-icon-monitor"></i><span>平台硬件</span>
      </div>
      <div class="flex-row" @click="scrollTo('anchor1')">
        <i class="el-icon-data-analysis"></i><span>平台软件</span>
      </div>
      <div class="flex-row" @click="scrollTo('anchor2')">
        <i class="el-icon-key"></i><span>解决方案</span>
      </div>
      <div class="flex-row" @click="scrollTo('anchor3')">
        <i class="el-icon-thumb"></i><span>核心优势</span>
      </div>
</div>

3、less样式

在这里插入图片描述

关键代码,都是最基础的,小伙伴们 自行去研究 注释。木鱼在这就不过多的介绍了

注意:本次演示样式部分 已经附加 👩‍🚀适配代码【可用于后台管理系统适配】详细请移步 vue后台管理做适配的最佳方案，你知道吗？

  // 关键样式代码
  .nav-fixed {
    z-index: 999;
    position: fixed;
    bottom: 198 / @remvw;
    right: 2.8%;
    width: 44 / @remvw;
    & > div {
      padding: 8 / @remvw;
      border-radius: 6 / @remvw;
      background-color: #ec8bc9;
      color: #fff;
      position: absolute;
      cursor: pointer;//小手状态
      top: 0;
      opacity: 0.6;//透明度
      i {
        font-size: 28 / @remvw;
      }
      span {
        display: none;//隐藏
        padding-left: 6 / @remvw;
        font-size: 14 / @remvw;
        font-weight: 550;
      }
    }
    // 移到到图标上的效果【默认只显示icon 图标】
    & > div:hover {
      left: -62 / @remvw;//鼠标移入 将i 和span 标签变成 水平拉长【图标和文字都显示】 
      opacity: 1;
      span {
        display: inline-block;
      }
    }
    // 背景颜色
    & > div:nth-child(2) {
      top: 44 / @remvw;
      background-color: #e58b8c;
    }
    & > div:nth-child(3) {
      top: 88 / @remvw;
      background-color: #8aa3f3;
    }
    & > div:nth-child(4) {
      top: 132 / @remvw;
      background-color: #96dc8b;
    }
  }

4、scrollIntoView 【关键】

作用:将调用它的元素滚动到浏览器窗口的可见区域。

  • behavior:‘smooth’ 平滑过渡
  • block：start 顶部、end 尾部
<script>
export default {
  methods: {
    scrollTo(anchor) {
      // 选中ref
      this.$refs[anchor].scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start", // 上边框与视窗顶部平齐。start、end 可选 默认值
      });
    },
  },
};
</script>

5、源码部分

视口部分：

<!--index.vue-->
<template>
  <div class="page">
    <div class="block">
      <div class="title" ref="anchor0">平台硬件</div>
      <div class="content">
        <div class="outer44"></div>
      </div>
    </div>
    <div class="block">
      <div class="title" ref="anchor1">平台软件</div>
      <div class="content">
        <div class="outer44"></div>
      </div>
    </div>
    <div class="block">
      <div class="title" ref="anchor2">解决方案</div>
      <div class="content">
        <div class="outer44"></div>
      </div>
    </div>
    <div class="block">
      <div class="title" ref="anchor3">核心优势</div>
      <div class="content">
        <div class="outer44"></div>
      </div>
    </div>

    <!-- 导航器 -->
    <div class="nav-fixed">
      <div class="flex-row" @click="scrollTo('anchor0')">
        <i class="el-icon-monitor"></i><span>平台硬件</span>
      </div>
      <div class="flex-row" @click="scrollTo('anchor1')">
        <i class="el-icon-data-analysis"></i><span>平台软件</span>
      </div>
      <div class="flex-row" @click="scrollTo('anchor2')">
        <i class="el-icon-key"></i><span>解决方案</span>
      </div>
      <div class="flex-row" @click="scrollTo('anchor3')">
        <i class="el-icon-thumb"></i><span>核心优势</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    scrollTo(anchor) {
      // 选中ref
      this.$refs[anchor].scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start", // 上边框与视窗顶部平齐。默认值
      });
    },
  },
};
</script>
<style scoped lang="less" src="@/assets/css/aiplatform.less" />

样式部分：

//index.less
@remvw: 1366/100vw;// 一📢适配关键代码 
.page {
  position: relative;
  width: 100%;
  background-color: rgba(255, 255, 255, 1);

  .block {
    width: 88%;
    margin: 20 / @remvw auto;
    .title {
      overflow-wrap: break-word;
      color: #424656;
      font-size: 32 / @remvw;
      font-family: PingFangSC-Medium;
      white-space: nowrap;
      line-height: 45 / @remvw;
      text-align: center;
    }
  
    .content {
      margin-top: 31 / @remvw;
      background-color: #eeeff4;
      padding: 10 / @remvw;
      .outer44 {
        height: 1020 / @remvw;
        background: #fff;
        width: 100%;
        position: relative;
        padding: 38 / @remvw 20 / @remvw;
      }
    }
  }

  .mt-20 {
    margin-top: 20 / @remvw;
  }
  // 关键样式代码
  .nav-fixed {
    z-index: 999;
    position: fixed;
    bottom: 198 / @remvw;
    right: 2.8%;
    width: 44 / @remvw;
    & > div {
      padding: 8 / @remvw;
      border-radius: 6 / @remvw;
      background-color: #ec8bc9;
      color: #fff;
      position: absolute;
      cursor: pointer;
      top: 0;
      opacity: 0.6;
      i {
        font-size: 28 / @remvw;
      }
      span {
        display: none;
        padding-left: 6 / @remvw;
        font-size: 14 / @remvw;
        font-weight: 550;
      }
    }
    // 移到到图标上的效果
    & > div:hover {
      left: -62 / @remvw;
      opacity: 1;
      span {
        display: inline-block;
      }
    }
    // 背景颜色
    & > div:nth-child(2) {
      top: 44 / @remvw;
      background-color: #e58b8c;
    }
    & > div:nth-child(3) {
      top: 88 / @remvw;
      background-color: #8aa3f3;
    }
    & > div:nth-child(4) {
      top: 132 / @remvw;
      background-color: #96dc8b;
    }
  }
}

博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了(vue实现导航器效果【vue+less+适配效果】)，希望可以帮到大家，谢谢。

👉 如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟

😛 您的支持就是我更新的最大动力。👇

往期精彩

vue全局自定义字体，提高项目字体美化

前端开发：颜色代码速查表【英文颜色、HEX格式、RGB格式】

前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】

OCR文字识别【前端渲染，后端进行逻辑处理】

vue实现按钮弹框【弹出图片、视频、表格、表单等】

posted @ 2022-06-21 08:44  水香木鱼  阅读(265)  评论(0)  编辑  收藏  举报