说明:由于ui组件不能满足设计图,同时样式穿透失效,故手写。
时间匆忙故,未作拓展,只有加粗样式根据所传入val值和回调事件,点击不同按钮触发的事件。
代码如下。
<template>
<view>
<view class="replenish">
</view>
<view class="box">
<view class="item" @tap="one" :class='{fontBold:val==1}'>
首页
</view>
<view class="item" @tap="two" :class='{fontBold:val==2}'>
广场
</view>
<view class="item" @tap="three" :class='{fontBold:val==3}'>
我们
</view>
</view>
</view>
</template>
<script>
export default {
name: "TabBar",
props: {
val: {
type: String,
default: "1"
}
},
data() {
return {}
},
methods: {
one(e) {
this.val != 1 && this.$emit('one');
},
two() {
this.val != 2 && this.$emit('two');
},
three() {
this.val != 3 && this.$emit('three');
}
}
}
</script>
<style lang="scss" scoped>
.fontBold {
color: #333333;
font-weight: bold;
}
.box {
position: fixed;
bottom: 0;
z-index: 999;
display: flex;
width: 100%;
height: 168rpx;
background-color: white;
font-size: 32rpx;
font-weight: 400;
color: #828282;
.item {
width: 33.3%;
text-align: center;
padding-top: 40rpx;
border-right: 1px solid #EEF0F4;
display: inline-block;
box-shadow: 0 -2px 0 #EEF0F4;
}
}
.replenish {
height: 168rpx;
}
</style>