<template>
<div class="tabberWarp">
<div class="warp">
<div
class="itemWarp flex_mid"
v-for='(item, index) in tabbarDes'
:key="index"
@click="getVal(item)"
>
<img :src="item.page === $route.path ? item.activeImg : item.normalImg" alt="" />
<p :class="['font', {color: item.page === $route.path}]">{{item.txt}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
selected: 'index',
tabbarDes: [
{
txt: '立即查询',
page: '/index',
normalImg: 'http://xxx.com/ncov/icon/foot/chaxun1.png',
activeImg: 'http://xxx.com/ncov/icon/foot/chaxun2.png'
},
{
txt: '全部信息',
page: '/Info',
normalImg: 'http://xxx.com/ncov/icon/foot/quanbu1.png',
activeImg: 'http://xxx.com/ncov/icon/foot/quanbu2.png'
},
{
txt: '意见反馈',
page: '/opinion',
normalImg: 'http://xxx.com/ncov/icon/foot/fankui1.png',
activeImg: 'http://xxx.com/ncov/icon/foot/fankui2.png'
},
{
txt: '技术支持',
page: '/aboutAs',
normalImg: 'http://xxx.com/ncov/icon/foot/guanyu1.png',
activeImg: 'http://xxx.com/ncov//icon/foot/guanyu2.png'
}
]
}
},
methods: {
getVal (res) {
console.log(this.$route.path)
this.selected = res.page
this.$router.push(res.page)
}
}
}
</script>
<style lang="less">
.warp {
width: 100%;
border-top: 1px solid #eee;
background: #fff;
display: flex;
align-items: center;
justify-content: space-around;
font-size: 0;
.itemWarp {
text-align: center;
.font {
font-size: 12px;
&.color {
color: #6076FF;
}
}
}
}
.warp img {
width: 20px;
height: 20px;
}
.tabberWarp img {
margin-top: 10px;
margin-bottom: 5px;
}
.tabberWarp {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 5px;
background: #fff;
}
</style>
vue h5移动端封装tabBar组件
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 支持左右滑动切换、不限 item 数量的 tabbar 是分类信息列表展示必不可少的组件,在 flutter 中可...
- [https://blog.csdn.net/weixin_30478923/article/details/97...