59 lines
2.4 KiB
Vue
59 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view style="height: 56px;font-size: 10px;border-top: 1rpx solid #FFFFFF;background-color: #FFFFFF;
|
||
|
|
position: fixed;bottom: 0;left: 0;right: 0;display: flex;justify-content: space-around;align-items: center;">
|
||
|
|
<view @tap="choosefoot(index)" v-for="(item,index) in tabArr" :key="index" style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
|
||
|
|
<image v-if="current==index" :src="item.selectedIconPath" style="width: 22px;height: 22px;"></image>
|
||
|
|
<image v-else :src="item.iconPath" style="width: 22px;height: 22px;"></image>
|
||
|
|
<view :class="current==index?'footactive':'footmo'" style="margin-top: 4px;">{{item.text}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:'footTab',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabArr:[
|
||
|
|
{
|
||
|
|
'pagePath': 'pages/tabbar/homePage/homePage',
|
||
|
|
'iconPath': '../static/img/tabbar/pagem.png',
|
||
|
|
'selectedIconPath': '../static/img/tabbar/pageh.png',
|
||
|
|
'text': '首页'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'pagePath': 'pages/tabbar/product/product',
|
||
|
|
'iconPath': '../static/img/tabbar/productm.png',
|
||
|
|
'selectedIconPath': '../static/img/tabbar/product.png',
|
||
|
|
'text': '产品'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'pagePath': 'pages/tabbar/shoppingCart/shoppingCart',
|
||
|
|
'iconPath': '../static/img/tabbar/chem.png',
|
||
|
|
'selectedIconPath': '../static/img/tabbar/chem.png',
|
||
|
|
'text': '购物车'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'pagePath': 'pages/tabbar/my/my',
|
||
|
|
'iconPath': '../static/img/tabbar/mym.png',
|
||
|
|
'selectedIconPath': '../static/img/tabbar/my.png',
|
||
|
|
'text': '我的'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
current:0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
choosefoot(index){
|
||
|
|
this.current = index
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.footactive{color: #214995;}
|
||
|
|
.footmo{color: #aaaeb7;}
|
||
|
|
</style>
|