当前位置:网站首页>3. Package the bottom navigation tabbar
3. Package the bottom navigation tabbar
2022-07-05 03:56:00 【Justion_】
New component Tabbar
And introduce Home On the page
edit Tabbar Components
<template>
<div class="tabbr">
<ul>
<li
v-for="(item, index) in routerList"
:key="index"
@click="switchTab(item.path)"
>
<img
:src="$route.path.includes(item.path) ? item.selected : item.active"
alt=""
/>
<span :class="$route.path.includes(item.path) ? 'active' : ''">{
{
item.title
}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
routerList: [
{
title: " home page ",
path: "/home",
active: "./images/home_default.png",
selected: "./images/home_selected.png",
},
{
title: " classification ",
path: "/list",
active: "./images/category_default.png",
selected: "./images/category_selected.png",
},
{
title: " The shopping cart ",
path: "/cart",
active: "./images/shoppingcart_default.png",
selected: "./images/shoppingcart_selected.png",
},
{
title: " my ",
path: "/my",
active: "./images/mine_default.png",
selected: "./images/mine_selected.png",
},
],
};
},
methods: {
switchTab(path) {
// Determine whether the same route is clicked
if (this.$route.path == path) return;
// Corresponding jump page
this.$router.replace(path);
},
},
};
</script>
<style scoped >
.tabbr {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 999;
height: 1.3333rem;
background-color: #fff;
}
.tabbr ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.tabbr ul li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tabbr ul li img {
width: 0.8267rem;
height: 0.8267rem;
}
.tabbr ul li span {
font-size: 16px;
}
.active {
color: green;
}
</style>
Home page Home Set redirection
边栏推荐
- MindFusion. Virtual Keyboard for WPF
- [wp]bmzclub writeup of several questions
- ClickPaaS低代码平台
- The new project Galaxy token just announced by coinlist is gal
- Official announcement! The third cloud native programming challenge is officially launched!
- 一文带你了解BI的前世今身与企业数字化转型的关系
- glibc strlen 实现方式分析
- [charging station]_ Secular wisdom_ Philosophical wisdom _
- 面试汇总:这是一份全面&详细的Android面试指南
- How is the entered query SQL statement executed?
猜你喜欢
On the day 25K joined Tencent, I cried
The new project Galaxy token just announced by coinlist is gal
【无标题】
Deep learning - LSTM Foundation
CTF stegano practice stegano 9
Smart pointer shared_ PTR and weak_ Difference of PTR
Clickhouse物化视图
MindFusion. Virtual Keyboard for WPF
Quick start of UI component development of phantom engine [umg/slate]
Web components series (VII) -- life cycle of custom components
随机推荐
[luat-air105] 4.1 file system FS
Interview summary: This is a comprehensive & detailed Android interview guide
Binary heap implementation (priority queue implementation)
IronXL for .NET 2022.6
[learning notes] month end operation -gr/ir reorganization
Clickhouse物化视图
DMX parameter exploration of grandma2 onpc 3.1.2.5
ClickPaaS低代码平台
Use object composition in preference to class inheritance
Zero foundation uses paddlepaddle to build lenet-5 network
UI automation test farewell to manual download of browser driver
[groovy] string (string splicing | multi line string)
[positioning in JS]
Delphi read / write JSON format
A brief introduction to the behavior tree of unity AI
It took two nights to get Wu Enda's machine learning course certificate from Stanford University
Enterprise level: spire Office for . NET:Platinum|7.7. x
Clickhouse同步mysql(基于物化引擎)
EasyCVR更改录像存储路径,不生成录像文件如何解决?
Quick start of UI component development of phantom engine [umg/slate]