106 lines
1.8 KiB
Vue
106 lines
1.8 KiB
Vue
<template>
|
|
<view class="tabBar">
|
|
<view class="tab-ul-layout">
|
|
<view v-for="(ite,ind) in list" :key="ind" @click="handlePush(ite,ind)" :class="ite.middleClass">
|
|
<image :src="tabInd==ind?ite.selectedIconPath:ite.iconPath"></image>
|
|
<text>{{ite.text}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "tabBar",
|
|
props: {
|
|
tabInd: {
|
|
type: String,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
list: [{
|
|
"pagePath": "/pages/index/index",
|
|
"iconPath": "../static/home3.png",
|
|
"selectedIconPath": "../static/home1.png",
|
|
"text": "首页"
|
|
},
|
|
{
|
|
"pagePath": "/pages/phoneList/phoneList",
|
|
"iconPath": "../static/e.png",
|
|
"selectedIconPath": "../static/e.png",
|
|
"text": "企业名录",
|
|
"middleClass": 'tab-item-middle'
|
|
},
|
|
{
|
|
"pagePath": "/pages/me/me",
|
|
"iconPath": "../static/me.png",
|
|
"selectedIconPath": "../static/me01.png",
|
|
"text": "我的"
|
|
}
|
|
]
|
|
};
|
|
},
|
|
// computed: {
|
|
// getHeight() {
|
|
// return Number(this.height)
|
|
// }
|
|
// },
|
|
methods: {
|
|
handlePush(ite, ind) {
|
|
if (this.tabInd !== ind) {
|
|
uni.switchTab({
|
|
url: ite.pagePath
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tabBar {
|
|
width: 100%;
|
|
}
|
|
|
|
.tab-ul-layout {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
height: 65px;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
z-index: 99999;
|
|
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
|
|
|
view {
|
|
text-align: center;
|
|
}
|
|
|
|
image {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
text {
|
|
width: 100%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tab-item-middle {
|
|
margin-top: -30px;
|
|
|
|
image {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
</style> |