This commit is contained in:
龙运模 2024-01-16 16:57:49 +08:00
parent a7049570e3
commit 01a158c99b
8 changed files with 244 additions and 3 deletions

View File

@ -2,7 +2,10 @@
export default {
onLaunch: function() {
console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!')
console.log('App Launch')
console.log('App Launch')
// tabBar
uni.hideTabBar();
},
onShow: function() {
console.log('App Show')

View File

View File

View File

@ -0,0 +1,148 @@
<template>
<view class="tabbar-container">
<block>
<!-- 针对中间的导航栏 通过true来判断控制类名和样式 -->
<view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)" :key="index">
<view class="item-top">
<image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
</view>
<!-- 通过三元判断控制类名 达到控制选中和未选中的样式 -->
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
<text>{{ item.text }}</text>
</view>
</view>
</block>
</view>
</template>
<script>
// easycom 使
export default {
props: {
currentPage: {
type: Number,
default: 0
}
},
data () {
return {
currentItem: 0,
tabbarList: [
{
id: 0,
path: '/pages/index/index',
// icon: '/static/template.png',
// selectIcon: '/static/templateHL.png',
text: '首页',
centerItem: false
},
{
id: 1,
path: '/pages/midell/index',
// icon: '/static/api.png',
// selectIcon: '/static/apiHL.png',
text: '中间',
// class
centerItem: true
},
{
id: 2,
path: '/pages/mine/index',
// icon: '/static/component.png',
// selectIcon: '/static/componentHL.png',
text: '我的',
centerItem: false
}
]
}
},
mounted () {
this.currentItem = this.currentPage
// tabBar
uni.hideTabBar()
},
methods: {
changeItem (item) {
let _this = this
//_this.currentItem = item.id;
uni.switchTab({
url: item.path
})
}
}
};
</script>
<style lang="less" scope>
view {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.tabbar-container {
position: fixed;
bottom: 0rpx;
left: 0rpx;
width: 100%;
height: 110rpx;
box-shadow: 0 0 5px #999;
display: flex;
align-items: center;
padding: 5rpx 0;
color: #999999;
/* 针对tabbar的统一处理 */
.tabbar-item {
width: 33.33%;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
.item-top {
width: 70rpx;
height: 70rpx;
padding: 10rpx;
image {
width: 100%;
height: 100%;
}
}
//
.item-bottom {
font-size: 28rpx;
width: 100%;
}
//
.item-active {
color: #f00;
}
}
// tabbar
.center-item {
display: block;
position: relative;
.item-top {
flex-shrink: 0;
width: 100rpx;
height: 100rpx;
position: absolute;
top: -50rpx;
left: calc(50% - 50rpx);
border-radius: 50%;
box-shadow: 0 0 5px #999;
background-color: rgb(240, 63, 131);
}
.item-bottom {
position: absolute;
bottom: 5rpx;
}
.item-active {
position: absolute;
bottom: 5rpx;
color: #1fff;
}
}
}
</style>

View File

@ -0,0 +1,86 @@
<template>
<view class="tab-bar">
<view class="content">
<view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
<view>
<view class="tab-img">
<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
<image v-else class="img" :src="item.iconPath"></image>
</view>
</view>
<view v-if="routePath === item.pagePath" class="tit selectTexts">{{ item.text }}</view>
<view v-else class="tit texts">{{ item.text }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 底部导航栏数据
tabBarList: {
type: Array,
required: true
},
// 当前页面路径
routePath: {
type: String,
required: true
}
},
data() {
return {};
},
methods: {
selectTabBar(path) {
this.$emit('onTabBar', path)
}
}
};
</script>
<style lang="scss">
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding-top: 10rpx;
padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
background-color: #fff;
.content {
display: flex;
.one-tab {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
.tab-img {
width: 50rpx;
height: 50rpx;
.img {
width: 100%;
height: 100%;
}
}
.tit {
font-size: 30rpx;
transform: scale(0.7);
}
.selectTexts{
color:#1890e1;
}
.texts{
color: block;
}
}
}
}
</style>

View File

3
package-lock.json generated Normal file
View File

@ -0,0 +1,3 @@
{
"lockfileVersion": 1
}

View File

@ -57,7 +57,8 @@
}
]
},
"tabBar":{
"tabBar":{
"custom":true,
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
@ -74,5 +75,5 @@
"text":"我的"
}
]
}
}
}