You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.2 KiB
97 lines
2.2 KiB
<template>
|
|
<view class="tarbar">
|
|
<view @click="change(index)" v-for="(item,index) in tarbar" :key="item.name" :class="index==2?'img_m':'tarbar_img'">
|
|
<image :src="item.src"></image>
|
|
<view>{{ item.name}}</view>
|
|
</view>
|
|
<!-- <view class="tarbar_img"@click="change(1)"><image src="../../static/img/Category.png"></image><view>Category</view></view>
|
|
<view class="img_m" @click="change(2)"><image src="../../static/img/add.png"></image></view>
|
|
<view class="tarbar_img"@click="change(3)"><image src="../../static/img/Cart.png"></image><view>Cart</view></view>
|
|
<view class="tarbar_img"@click="change(4)"><image src="../../static/img/Account.png"></image><view>Account</view></view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:'tarbar',
|
|
data(){
|
|
return{
|
|
list:[
|
|
{src:'../../static/icon/home4.png'},
|
|
{src:'../../static/img/Category1.png'},
|
|
{src:''},
|
|
{src:'../../static/img/cart1.png'},
|
|
{src:'../../static/img/Account1.png'}
|
|
],
|
|
tarbar:[
|
|
{
|
|
src:'../../static/icon/home3.png',
|
|
name:'Home'
|
|
},
|
|
{
|
|
src:'../../static/img/Category.png',
|
|
name:'Category'
|
|
},
|
|
{
|
|
src:'../../static/icon/home3.png',
|
|
name:''
|
|
},
|
|
{
|
|
src:'../../static/img/Cart.png',
|
|
name:'Cart'
|
|
},
|
|
{
|
|
src:'../../static/img/Account.png',
|
|
name:'Account'
|
|
},
|
|
],
|
|
}
|
|
},
|
|
methods:{
|
|
change(e){
|
|
this.index = e
|
|
let tarbar = this.tarbar
|
|
for(let i =0; i<this.tarbar.length;i++){
|
|
if(e==i){
|
|
this.tarbar[e].src = this.list[e].src
|
|
}else{
|
|
this.tarbar = tarbar
|
|
this.tarbar[i].src = tarbar[i].src
|
|
}
|
|
}
|
|
// uni.switchTab({
|
|
// url:this.list[e].url
|
|
// })
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.tarbar{
|
|
height: 100rpx;
|
|
width: 100vw;
|
|
padding-top: 10rpx;
|
|
padding-bottom: 10rpx;
|
|
background-color: #fff;
|
|
bottom: 0;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
position: fixed;
|
|
display: flex;
|
|
color:#707070;
|
|
justify-content: space-around;
|
|
.tarbar_img image{
|
|
height: 50rpx;
|
|
width: 50rpx;
|
|
|
|
// background-color: #fff;
|
|
}
|
|
.img_m image{
|
|
height: 80rpx;
|
|
width: 80rpx;
|
|
margin-top: -20rpx;
|
|
}
|
|
|
|
}
|
|
</style>
|