169 lines
3.5 KiB
Vue
169 lines
3.5 KiB
Vue
<template>
|
||
<!-- 底部导航 -->
|
||
<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
|
||
<view class="tabbar-item"
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
@click="tabbarChange(item.path)"
|
||
:class="current == index? 'name-active' : ''">
|
||
<view class="image-wrap">
|
||
<!-- <image class="item-img" :src="item.iconPath" v-if="current == index"
|
||
:style="{width: item.width, height: item.height}"></image>
|
||
<image class="item-img" :src="item.icon" v-else :style="{width: item.width, height: item.height}">
|
||
</image> -->
|
||
<view class="name">
|
||
{{item.text}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
current: Number
|
||
},
|
||
data() {
|
||
return {
|
||
paddingBottomHeight: 0, //苹果X以上手机底部适配高度
|
||
list: [{
|
||
text: '家人', //首页
|
||
icon: '/static/image/home.png',
|
||
iconPath: '/static/image/home-select.png',
|
||
path: "/pages/index/index",
|
||
width: "66rpx",
|
||
height: "66rpx"
|
||
},
|
||
{
|
||
text: '设备', //首页
|
||
icon: '/static/image/device.png',
|
||
iconPath: '/static/image/device-select.png',
|
||
path: "/pages/device/device",
|
||
width: "66rpx",
|
||
height: "66rpx"
|
||
},
|
||
{
|
||
text: '我的', //我的
|
||
icon: '/static/image/my.png',
|
||
iconPath: '/static/image/my-select.png',
|
||
path: "/pages/my/my",
|
||
width: "66rpx",
|
||
height: "66rpx"
|
||
}
|
||
]
|
||
};
|
||
},
|
||
created() {
|
||
let that = this;
|
||
uni.getSystemInfo({
|
||
success: function(res) {
|
||
let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
|
||
model.forEach(item => {
|
||
//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
|
||
if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
|
||
that.paddingBottomHeight = 40;
|
||
}
|
||
})
|
||
}
|
||
});
|
||
},
|
||
|
||
methods: {
|
||
tabbarChange(path) {
|
||
uni.reLaunch({
|
||
url: path
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.tabbarActive {
|
||
color: #79D5AD !important;
|
||
}
|
||
|
||
.tabbar {
|
||
position: fixed;
|
||
// bottom: 0rpx;
|
||
// left: 0;
|
||
top: 0;
|
||
display: flex;
|
||
// justify-content: space-around;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 180rpx;
|
||
// background: #FFFFFF;
|
||
z-index: 999999;
|
||
-webkit-box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, .1);
|
||
box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, .1);
|
||
}
|
||
|
||
.tabbar-item {
|
||
width: 260rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
border-radius: 50rpx;
|
||
background-color: #fff;
|
||
margin: 0rpx 30rpx;
|
||
border: 4rpx solid grey;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-wrap {
|
||
width: 130rpx;
|
||
height: 110rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.image-scan {
|
||
position: absolute;
|
||
top: -65rpx;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
|
||
.circle {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
position: absolute;
|
||
top: 10rpx;
|
||
left: -50%;
|
||
right: -50%;
|
||
margin: 0 auto;
|
||
border-radius: 50%;
|
||
background-color: #382daf;
|
||
}
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
position: absolute;
|
||
left: -50%;
|
||
right: -50%;
|
||
margin: 0 auto;
|
||
top: 40rpx;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 48rpx;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.name-active {
|
||
background-color: #000;
|
||
color: #fff;
|
||
}
|
||
|
||
.item-img {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
}
|
||
</style> |