组件实战（一）——导航栏设计

简介

常见导航栏的设计与封装，以及一些知识点的记录。为了避免组件太细不好管理，这里的导航栏包括了logo以及导航菜单等等。

功能详解

导航栏是黏性的，也就是拖动到下方时，导航栏会fix在顶部。
其次，导航栏是自适应的，当界面不适合时会折叠，靠按钮展开。

效果

固定时，折叠与未折叠

非固定时，折叠与未折叠

展开时：

代码

<template><header :class="header_classList"><div class="logo" >{{prop_data.logo_text}}</div><nav><a v-for="(value, key, index) in prop_data.nav_link" :href="value">{{key}}</a></nav><div class="burger" @click="menu_open"><div class="burger-line1"></div><div class="burger-line2"></div><div class="burger-line3"></div></div></header>
</template><script>export default {name: "my_header",props: {prop_data : {type: Object,default:{logo_text:"Yong的主页",nav_link:{'首页': '#home','关于我们': '#about-us','成功案例':'#showcases','服务流程':'#service','团队介绍':'#team-intro','公司动态':'#company-activties'}}}},data(){return{header_classList: {open: false,sticky: false}}},methods: {menu_open(){this.header_classList.open = !this.header_classList.open;},handleScroll(){this.header_classList.open = false;if(window.pageYOffset>1000){this.header_classList.sticky = true;console.log(window.pageYOffset);}else{this.header_classList.sticky = false;}}},mounted () {window.addEventListener('scroll', this.handleScroll, true)},destroyed () {// 离开该页面需要移除这个监听的事件，不然会报错window.removeEventListener('scroll', this.handleScroll)}}
</script><style scoped>@import '~assets/css/public.css';header {width: 100%;height: 80px;display: grid;padding: 0 40px;grid-template-columns:1fr 2fr;align-items: center;position: relative;z-index: 200;}.logo {font-size: 24px;font-weight: 600;color: var(--text-color-lightest)}header nav {justify-self: end;}header nav i {color: var(--text-color-lightest)}header nav a {color: var(--text-color-lightest);text-decoration: none;margin: 0 24px;}header .burger{display: none;}/*导航特效*/header.sticky {position: fixed;background-color: white;box-shadow: 0 0 18px rgba(0,0,0,0.2);animation: dropDown 0.5s ease-in-out forwards;}@keyframes dropDown {from {transform: translateY(-100px);}to {transform: translateY(0);}}header.sticky .logo,header.sticky nav a,header.sticky nav i {color: var(--text-color-darker);}/*自适应菜单*/@media (max-width: 1100px) {header nav {display: none;}header {grid-template-columns: 1fr 1fr;}header .burger {display: flex;flex-direction: column;justify-content: space-around;width: 20px;height: 20px;justify-self: end;cursor: pointer;}.burger-line1,.burger-line2,.burger-line3 {width: 20px;height: 2px;background-color: var(--text-color-lightest);}/*展开或fix时的样式*/header.sticky .burger-line1,header.sticky .burger-line2,header.sticky .burger-line3,header.open .burger-line1,header.open .burger-line2,header.open .burger-line3 {background-color: var(--text-color-darker);z-index: 100;transition: 0.4s ease;}/*展开时的展示*/header.open nav {display: grid;position: absolute;left: 0;top: 0;width: 100vw;height: 100vh;background-color: white;grid-auto-rows: max-content;justify-items: end;padding: 0 40px;opacity: 0;animation: slideDown 0.6s ease-in-out forwards;}header.open nav > * {color: var(--text-color-darker);animation: showMenu 0.5s linear forwards 0.4s; /*0.4s是延迟*/font-size: 18px;margin: 4px 0;opacity: 0;}header.open .burger-line1 {transform: rotate(45deg) translate(4px, 6px);}header.open .burger-line2 {transform: translateX(5px);opacity: 0;}header.open .burger-line3 {transform: rotate(-45deg) translate(4px, -6px);}header.open .logo {z-index: 40;color: var(--text-color-darker);}/*展开菜单的动画*/@keyframes slideDown {0% {height: 0;opacity: 0;}100% {height: 100vh;padding-top: 80px;opacity: 1;}}@keyframes showMenu {0% {opacity: 0;transform: translateY(-1vh);}100% {opacity: 1;transform: translateY(0);}}}</style>

知识点

v-for遍历对象

这个比较简单，用(value, key, index)即可

css中var的使用

用:root可以设定变量，变量名为–开头的字符串，然后css样式中可以用–导入，比如此例子中，导入了一个外部css文件，正是设置这些颜色变量的公用css文件

轮动条监听

生成组件时，将window事件与自定义函数绑定在一起，销毁时接触。

样式的绑定

利用:class动态绑定类（有数组、对象多种形式），同样，也可以用style动态。

组件实战（一）——导航栏设计相关推荐

03-Flutter移动电商实战-底部导航栏制作
03-Flutter移动电商实战-底部导航栏制作 1.cupertino_IOS风格介绍在Flutter里是有两种内置风格的: material风格: Material Design 是由 Goog ...
html 导航栏设计,在网页中设计导航菜单的三个原则（附案例）
导航菜单可能是网页设计中最重要的部分了.每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息.好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息. 而且导航 ...
9.后台管理系统主页面布局以及左侧导航栏设计
9.后台管理系统主页面布局以及左侧导航栏设计 1.首页布局步骤: 在views目录下新建Main.vue文件,作为登录之后的布局参考:element-ui 使用此模块的目的是,当中间内容部分有超出 ...
uni-app开发：tabar组件与顶部导航栏（功能开发篇）
uni-app开发:tabar组件与顶部导航栏(含右侧icon点击功能)[结合:案例Demo截图] 一.效果图 · 截图: 二. tabar组件 + 顶部导航栏(含右侧icon点击功能) 组件的代码调 ...
2019年最实用的导航栏设计实践和案例分析全解
我们都知道,用户的浏览习惯是从左到右,从上到下.所以一个网站的导航栏至关重要,用户进入你的网站,首先查找的信息就是从导航栏开始.一个用户体验好的导航栏,会增加网站的转化率和回访率.反之,用户会离开你的 ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
Android开发——底部导航栏设计
底部导航栏设计 1.依赖配置 2.tabbar的UI实现 3.tabbar的逻辑绑定 4.tabbar的滑动与点击联动 5.tabbar与文本输入的冲突解决方案其实,常见的Android和微 ...
【Flutter -- 基础组件】Flutter 导航栏
文章目录 1. TabBar 1.1 代码 1.2 效果图 2. BottomNavigationBar 2.1 构建底部标签 2.2 创建导航栏 2.3 效果图 1. TabBar Flutter ...
【游戏面包屑】简单的导航栏设计
前言为了便于UI的开发,设计了一个简单的导航栏结构.目前版本的导航栏抽象类简化了导航栏选项的事件监听.移除.后续根据需求再丰富功能.结构. 本次实例用于设计角色·技能UI窗口的左侧导航栏以及右下角的 ...