自定义tabbar

This commit is contained in:
龙运模 2024-01-16 18:52:23 +08:00
parent 632e19ceda
commit 54d1b52fb8
9 changed files with 40 additions and 113 deletions

View File

@ -4,6 +4,7 @@
console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!') console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!')
console.log('App Launch') console.log('App Launch')
// plus.navigator.setFullscreen(true);// // plus.navigator.setFullscreen(true);//
// uni.hideTabBar();
}, },
onShow: function() { onShow: function() {
console.log('App Show') console.log('App Show')

View File

@ -31,25 +31,25 @@ export default {
{ {
id: 0, id: 0,
path: '/pages/index/index', path: '/pages/index/index',
// icon: '/static/template.png', icon: '/static/logo.png',
// selectIcon: '/static/templateHL.png', selectIcon: '/static/logo.png',
text: '首页', text: '首页',
centerItem: false centerItem: false
}, },
{ {
id: 1, id: 1,
path: '/pages/midell/index', path: '/pages/person/person',
// icon: '/static/api.png', // icon: '/static/logo.png',
// selectIcon: '/static/apiHL.png', // selectIcon: '/static/logo.png',
text: '中间', text: '扫一扫',
// class // class
centerItem: true centerItem: true
}, },
{ {
id: 2, id: 2,
path: '/pages/mine/index', path: '/pages/person/person',
// icon: '/static/component.png', icon: '/static/logo.png',
// selectIcon: '/static/componentHL.png', selectIcon: '/static/logo.png',
text: '我的', text: '我的',
centerItem: false centerItem: false
} }
@ -72,7 +72,7 @@ export default {
} }
}; };
</script> </script>
<style lang="less" scope> <style lang="scss" scope>
view { view {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -110,12 +110,12 @@ view {
} }
// //
.item-bottom { .item-bottom {
font-size: 28rpx; font-size: 12px;
width: 100%; width: 100%;
} }
// //
.item-active { .item-active {
color: #f00; color: #fff;
} }
} }
@ -132,7 +132,6 @@ view {
left: calc(50% - 50rpx); left: calc(50% - 50rpx);
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;
background-color: rgb(240, 63, 131);
} }
.item-bottom { .item-bottom {
position: absolute; position: absolute;

View File

@ -1,86 +0,0 @@
<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

@ -2,7 +2,6 @@
import "./static/iconfont/iconfont.css" import "./static/iconfont/iconfont.css"
import "./static/iconfont/iconfont-weapp/iconfont-weapp-icon.css" import "./static/iconfont/iconfont-weapp/iconfont-weapp-icon.css"
// #ifndef VUE3 // #ifndef VUE3
import Vue from 'vue' import Vue from 'vue'
import App from './App' import App from './App'
@ -28,3 +27,4 @@ export function createApp() {
} }
} }
// #endif // #endif

View File

@ -1,5 +1,6 @@
<template> <template>
<view class="home">
<view class="container home">
<view class="home_head"> <view class="home_head">
<view class="iconfont icon-chaojiguanliyuan accounticon"></view> <view class="iconfont icon-chaojiguanliyuan accounticon"></view>
<view class="name">Ykxiao 超级管理员</view> <view class="name">Ykxiao 超级管理员</view>
@ -59,13 +60,20 @@
</view> </view>
</view> </view>
</view> </view>
<tab-bar :current-page="0"></tab-bar>
</view> </view>
</template> </template>
<script> <script>
import tabBar from "@/components/customTabBar/index"
export default { export default {
components:{
tabBar
},
data() { data() {
return { return {
} }
}, },
methods: { methods: {

View File

@ -59,11 +59,16 @@
<view class="font13">系统设置</view> <view class="font13">系统设置</view>
</view> </view>
</view> </view>
<tab-bar :current-page="2"></tab-bar>
</view> </view>
</template> </template>
<script> <script>
import tabBar from "@/components/customTabBar/index"
export default { export default {
components:{
tabBar
},
data() { data() {
return { return {
} }