96 lines
1.8 KiB
Vue
96 lines
1.8 KiB
Vue
<template>
|
|
<view class="tabbar_pages p30">
|
|
<view class="tabbar_pages_view" v-for="(item, index) in list" :key="index" @click="toLink(item.pagePath)">
|
|
<view>
|
|
<view>
|
|
<image mode="widthFix" :src="path == item.pagePath ? item.icon : item.icon_select"></image>
|
|
</view>
|
|
<view :style="{ color: path == item.pagePath ? '#4874E5' : '' }">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const data = defineProps({
|
|
path: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
});
|
|
|
|
let list = ref([
|
|
{
|
|
pagePath: '/pages/index/index',
|
|
text: '首页',
|
|
icon_select: '/static/tabbar/home.png',
|
|
icon: '/static/tabbar/homes.png',
|
|
type: 0
|
|
},
|
|
{
|
|
pagePath: '/pages/market/market',
|
|
text: '公告',
|
|
icon_select: '/static/tabbar/market.png',
|
|
icon: '/static/tabbar/markets.png',
|
|
type: 0
|
|
},
|
|
{
|
|
pagePath: '/pages/mine/mine',
|
|
text: '我的',
|
|
icon_select: '/static/tabbar/mine.png',
|
|
icon: '/static/tabbar/mines.png',
|
|
type: 0
|
|
}
|
|
]);
|
|
|
|
const toLink = (e) => {
|
|
uni.vibrateShort();
|
|
if (data.path == e) return true;
|
|
uni.switchTab({
|
|
url: e
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tabbar_pages {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 750rpx;
|
|
height: 120rpx;
|
|
@include flex($space: space-between);
|
|
background-color: #fff;
|
|
box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(88, 140, 255, 0.1);
|
|
border-radius: 15rpx 15rpx 0rpx 0rpx;
|
|
z-index: 99;
|
|
padding: 20rpx 115rpx;
|
|
&_view {
|
|
width: 100%;
|
|
view {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
@include flex($direction: column, $space: space-between);
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&_view:nth-child(1){
|
|
view{
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
&_view:nth-child(3){
|
|
view{
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
}
|
|
</style>
|