Vue3+Vant4.x自定义凸起导航栏
我们使用Vant的van-tabbar组件，通过 icon 插槽自定义图标，可以通过 slot-scope 判断标签是否选中。
然后我们来改一下自定义导航栏的样式，如下代码：
<script setup>
import midIconA from '@/assets/images/list.png'
import midIconI from '@/assets/images/list.png'
const active = ref(0)
const icon = {
active: midIconA,
inactive: midIconI
}
</script>
<template>
<div>
<router-view />
</div>
<van-tabbar route v-model="active" :border="false">
<van-tabbar-item replace to="/" icon="search">首页</van-tabbar-item>
<van-tabbar-item replace to="/list">
<span class="title">自定义</span>
<template #icon="props">
<div class="tabs-2">
<div class="custom-img">
<img :src="props.active ? icon.active : icon.inactive" alt="" />
</div>
</div>
</template>
</van-tabbar-item>
<van-tabbar-item replace to="/user" icon="setting-o">我的</van-tabbar-item>
</van-tabbar>
</template>
<style lang="scss">
.title {
margin-top: 20px;
display: block;
font-size: 12px;
}
.van-tabbar-item__text {
z-index: 9;
}
.tabs-2 {
width: 60px;
background-color: #fff;
height: 60px;
border-radius: 100%;
position: absolute;
top: -25px;
left: -30px;
z-index: 1;
.custom-img {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
img {
width: 40px;
height: 40px;
margin-top: 5px;
}
}
}
</style>
注意：在van-tabbar中加载本地图片的时候，要动态引入，所以这里我们用import先引入我们的本地图片。
这里顺便讲一下路由模式，我们通过 replace 和 to 属性指定了路由链接。
如果不想用这种路由跳转方式，还可以通过设置监听切换事件来跳转，比如：·
<van-tabbar v-model="active" :border="false" @change="onChange">
<van-tabbar-item icon="search">首页</van-tabbar-item>
<van-tabbar-item>
<span class="title">自定义</span>
<template #icon="props">
<div class="tabs-2">
<div class="custom-img">
<img :src="props.active ? icon.active : icon.inactive" alt="" />
</div>
</div>
</template>
</van-tabbar-item>
<van-tabbar-item icon="setting-o">我的</van-tabbar-item>
</van-tabbar>
import { useRouter } from 'vue-router'
const router = useRouter()
const onChange = (index) => {
switch (index) {
case 0:
router.push('/')
break
case 1:
router.push('/list')
break
case 2:
router.push('/user')
break
}
}
这种也是可以跳转的，还可以在跳转的时候做一些逻辑的处理。
废话不多说，看一下效果：
当然最简单的方式就是让UI那边把凸起的图标切出来，直接放上去。
以上就是今日分享的文章，晚安啦！！
原文始发于微信公众号（大前端编程教学）：Vue3+Vant4.x自定义凸起导航栏
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/224072.html
