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

Posted 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现按钮弹框【弹出图片、视频、表格、表单等】

以上是关于vue实现导航器效果vue+less+适配效果的主要内容，如果未能解决你的问题，请参考以下文章

前端vue实现卡片翻转效果css3实现

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

vue实现导航栏吸顶效果 + 与内容联动

前端实现放大镜效果原生js实现vue实现

Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条

前端添加水印效果攻略vue和原生js添加方式