前几天发布了一个有关逐浪CMS黄页的说明，在实际的使用过程当中我们还会遇到一些细节问题。比如说我们的企业有好几种，像www.3j99.cn这里的面企业主要有三种
一是房产中介公司，二是装修公司，三是中介+装修的公司
每一种企业都需要不同的栏目，那我们怎么为不同的行业匹配不同的导航呢？
看见的效果吧

最近一直在学习Nuxt开发，由于 Nuxt.js 是基于 Vue.js 的服务端渲染应用框架，只要你熟悉vue，基本能很快上手了。

Nuxt.js

今天给大家分享一个超不错的Vue手机端导航吸顶组件VueStickyNav。

vue-sticky-nav 基于vue2.x实现的导航粘性吸顶

微信自带的顶部导航栏是无法支持自定义icon和增加元素的，在开发小程序的时候自带的根本满足不了需求，分享一个封装好的组件，支持自定义icon、扩展dom，适配安卓、ios、h5，全面屏。

我用的是京东的Taro多端编译框架写的小程序，原生的也可以适用，用到的微信/taro的api做调整就行，实现效果如下。

大家好，今天给大家介绍一款，css+JavaScript实现的二级导航菜单html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

前言

最近得空一直在捣鼓Vue3开发，想要快速上手，还是得写一些自定义组件。之前就有基于vue2.x写过一些自定义Navbar+Tabbar及弹窗

<svg width="0" height="0">
			<defs>
				<filter id="goo">
					<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
					<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
					<feComposite in="SourceGraphic" in2="goo" operator="atop" />
				</filter>
			</defs>
		</svg>
		<div class="target">
			<div>
				<i id="ball1" class="ball"></i>
				<i id="ball2" ref="ball2" class="ball"></i>
			</div>
		</div>
<div class="menu">
			<div class="menu-item" @click="updageMenuItem(0)">
				首页
				<span :class="{'menu-item-bg': menuActive == 0}">
					<i class="iconfont"></i>
				</span>
			</div>
			<div class="menu-item" @click="updageMenuItem(1)">
				发现
				<span :class="{'menu-item-bg': menuActive == 1}">
					<i class="iconfont"></i>
				</span>
			</div>
			<div class="menu-item" @click="updageMenuItem(2)">
				消息
				<span :class="{'menu-item-bg': menuActive == 2}">
					<i class="iconfont"></i>
				</span>
			</div>
			<div class="menu-item" @click="updageMenuItem(3)">
				我的
				<span :class="{'menu-item-bg': menuActive == 3}">
					<i class="iconfont"></i>
				</span>
			</div>
		</div>

<script>
updageMenuItem(index) {
			this.menuActive = index;
			let ball2 = this.$refs.ball2;
			Array(4)
				.fill(0)
				.map((item, it) => {
					ball2.classList.remove('active' + it);
				});
			setTimeout(()=>{
				ball2.classList.add('active' + index);
			},100)
		}
</script>

<style lang="less" scoped>
.profile {
	height: 100%;
	background: #aaaa7f;
	font-size: 14px;
	.menu,
	.target {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 50px;
		left: 0;
	}
	.target > div {
		filter: url('#goo');
	}
	.menu {
		display: flex;
		z-index: 5;
		background: #fff;
		.menu-item {
			flex: 1;
			color: #333;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			padding-bottom: 10px;
			position: relative;
			span {
				position: absolute;
				height: 35px;
				width: 35px;
				background: #aaaa7f;
				border-radius: 50%;
				left: 0;
				right: 0;
				margin: auto;
				top: 0;
				opacity: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				i {
					color: #fff;
					font-size: 20px;
				}
				&.menu-item-bg{
					animation: menuItemBg .5s .2s forwards;
				}
			}
		}
	}
	.ball {
		width: calc(100% + 60px);
		height: 50px;
		border-radius: 0;
		background-color: #fff;
		position: absolute;
		left: -30px;
		margin: auto;
		z-index: 1;
	}
	#ball2 {
		left: 0;
		top: 0px;
		width: 50px;
		height: 50px;
		margin: auto;
		border-radius: 50%;
		&.active0 {
			left: calc(((100% / 4) - 50px) / 2);
			animation: ballUp .5s forwards;
		}
		&.active1 {
			left: calc(((100% / 4) - 50px) / 2 + 100% / 4);
			animation: ballUp .5s forwards;
		}
		&.active2 {
			left: calc(((100% / 4) - 50px) / 2 + (100% / 4) * 2);
			animation: ballUp .5s forwards;
		}
		&.active3 {
			left: calc(((100% / 4) - 50px) / 2 + (100% / 4) * 3);
			animation: ballUp .5s forwards;
		}
	}
}
@keyframes ballUp {
	from {
		top: 0;
	}
	to {
		top: -25px;
	}
}
@keyframes menuItemBg {
	from {
		top: 0;
		opacity: 0;
	}
	to {
		top: -15px;
		opacity: 1;
	}
}

今天给大家分享vue3.x和electron11实现类似QQ顶部导航栏新开多窗口功能。

项目中的顶部弹窗用到了vue3自定义组件v3layer和electron新建窗口两种方式。

如上图：通过v3layer来实现弹窗功能。