2024年07月26日
2024年07月26日
最近得空一直在捣鼓Vue3开发，想要快速上手，还是得写一些自定义组件。之前就有基于vue2.x写过一些自定义Navbar+Tabbar及弹窗
2024年07月26日
<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;
}
}2024年07月26日
作为前端工作人员，都知道锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。但是点击瞄点超链接后，发现定位不准确，不能随心所欲，这下很苦逼，，，下面的这个js定位导航菜单定位很精准，比瞄点定位好用多了，，精准度都可以自由调整。
2024年07月26日
2024年07月26日
案例和由此案例重点讲解的知识点介绍
案例代码实现
行内标签知识点详解
2024年07月26日
今天跟大家分享的是，网站导航栏的实现原理。小伙伴们不要被它高大上的名头吓到了哦~
因为任何导航栏的实现都离不开我们今天即将学习的HTML列表标签。现在我们来看一下，即将用HTML列表标签写出的效果图是怎样的吧！
在写出上述效果之前，先来给大家介绍一下，基本的列表元素有哪些吧？
无序列表
2024年07月26日
最近在做一个商用网站，看着现在的网站导航条，自己想能不能有点新鲜的变化呢？当点击主菜单任意项时，会向下滑出所属的二级菜单组，同时网页的其它内容变暗，当操作完菜单后，跳转至指定链接页面。效果图如下：
部分源码如下：
特效全部代码
2024年07月26日
前言
本节我们使用uni app的底部导航功能，点击不同tab会显示不同页面，这个功能在实际项目开发中几乎是必备的。
一、基础知识
1.tabBar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。