页面
This commit is contained in:
pengxiaolong
259
components/tabBar/tabBar.vue
Normal file
259
components/tabBar/tabBar.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view class="tab-block">
|
||||
|
||||
<ul class="tab-list flex flex-center"
|
||||
:class="showMiddleButton === true ? 'tab-list-middle' : 'tab-list-default'">
|
||||
<li v-for="(item, index) in tabList" :class="'list-item flex flex-column flex-middle ' + item.middleClass"
|
||||
@click="handlePush(item, index)" :key="index">
|
||||
<view class="item-img-box">
|
||||
<image class="item-img" :src="tabIndex == index ? item.selectedIconPath : item.iconPath" />
|
||||
</view>
|
||||
<view class="item-text font-20" :style="{ color: tabIndex == index ? '#1DD2F9' : '#A7A3A3' }">{{
|
||||
item.text }}</view>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <view class="tab-bar" v-show="showTabBar === true"></view> -->
|
||||
<view @touchmove.stop.prevent="disabledScroll">
|
||||
<!-- <uni-popup ref="addSuccess" type="bottom">
|
||||
<imgSuccess @closeSuccess="closeSuccess"></imgSuccess>
|
||||
</uni-popup> -->
|
||||
</view>
|
||||
<moduleSelect ref="createModule"></moduleSelect>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import moduleSelect from './moduleSelect.vue'
|
||||
import {
|
||||
getCurrentInstance,
|
||||
defineProps,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
//定义弹窗组件
|
||||
// const addSuccess = ref(null);
|
||||
|
||||
// let showTabBar = ref(false);
|
||||
let showMiddleButton = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
tabIndex: Number
|
||||
})
|
||||
let tabList = reactive([{
|
||||
iconPath: '/static/mh/img/tabbar1.png',
|
||||
selectedIconPath: '/static/mh/img/tabbarSetl1.png',
|
||||
text: '探索',
|
||||
pagePath: '/pages/index/index',
|
||||
middleClass: ''
|
||||
},
|
||||
{
|
||||
iconPath: '/static/mh/img/tabbar3.png',
|
||||
selectedIconPath: '/static/mh/img/tabbarSetl3.png',
|
||||
// text: '消息',
|
||||
text: 'AI绘图',
|
||||
pagePath: '/pages/messages/messages',
|
||||
middleClass: ''
|
||||
},
|
||||
{
|
||||
iconPath: '/static/mh/img/add.png',
|
||||
selectedIconPath: '/static/mh/img/add.png',
|
||||
text: '',
|
||||
pagePath: '/pages/c/c',
|
||||
middleClass: ''
|
||||
},
|
||||
{
|
||||
iconPath: '/static/mh/img/tabbar2.png',
|
||||
selectedIconPath: '/static/mh/img/tabbarSetl2.png',
|
||||
text: '换背景',
|
||||
// text: '社区',
|
||||
pagePath: '/pages/like/like'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/mh/img/tabbar4.png',
|
||||
selectedIconPath: '/static/mh/img/tabbarSetl4.png',
|
||||
text: '我的',
|
||||
pagePath: '/pages/my/my',
|
||||
middleClass: ''
|
||||
}
|
||||
]);
|
||||
onMounted(() => {
|
||||
setTabBar();
|
||||
// getSystemInfo()
|
||||
});
|
||||
|
||||
uni.getSystemInfo({
|
||||
success: function (res) {
|
||||
// iPhone机型有横杆的导航栏高度大于40
|
||||
console.log('机型',res.deviceType);
|
||||
if (res.safeArea.top > 40) {
|
||||
console.log('苹果的底部栏大小',res.safeArea.top);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
//判断中间按钮是否突出显示
|
||||
function setTabBar() {
|
||||
let tabLength = tabList.length;
|
||||
if (tabLength % 2) {
|
||||
showMiddleButton.value = true;
|
||||
let middleIndex = Math.floor(tabLength / 2);
|
||||
tabList[middleIndex].middleClass = 'mid-button';
|
||||
}
|
||||
}
|
||||
//点击按钮
|
||||
function handlePush(item, index) {
|
||||
if (index === 2) {
|
||||
//打开弹窗
|
||||
// addSuccess.value.open();
|
||||
openPopupQuantity()
|
||||
return;
|
||||
} else if (index === 1) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/create/wenshengPicture/wenshengPicture"
|
||||
})
|
||||
} else if (index === 3) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/create/backgroundPicture/backgroundPicture"
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: item.pagePath
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
const createModule = ref()
|
||||
|
||||
function openPopupQuantity() {
|
||||
createModule.value.open()
|
||||
}
|
||||
//组件返回关闭指令
|
||||
function closeSuccess() {
|
||||
// addSuccess.value.close();
|
||||
}
|
||||
//解决弹出层后页面还可以滚动
|
||||
const disabledScroll = () => {
|
||||
return false
|
||||
}
|
||||
|
||||
//兼容iPhoneX以上底部黑线条的显示
|
||||
// function getSystemInfo() {
|
||||
// uni.getSystemInfo({
|
||||
// success: res => {
|
||||
// // X及以上的异形屏top为44，非异形屏为20
|
||||
// if (res.safeArea.top > 20) {
|
||||
// showTabBar.value = true;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-middle {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.font-20 {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.tab-block {
|
||||
position: relative;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
// left: 0;
|
||||
z-index: 999;
|
||||
background-size: contain;
|
||||
width: 100vw;
|
||||
background-color: #111111;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.tab-list {
|
||||
height: 100rpx;
|
||||
padding: 0; //解决偏移
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tab-list-default {
|
||||
background-color: #ffffff;
|
||||
border-top: 1px #dddddd solid;
|
||||
}
|
||||
|
||||
.tab-list-middle {
|
||||
position: relative;
|
||||
|
||||
// background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
flex: 1;
|
||||
|
||||
.item-img-box {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-bottom: 9rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
// width: 44rpx;
|
||||
// height: 42rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.mid-button {
|
||||
position: relative;
|
||||
|
||||
.item-img-box {
|
||||
width: 150rpx;
|
||||
height: 148rpx;
|
||||
margin-bottom: 9rpx;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -104rpx;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 150rpx;
|
||||
height: 116rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
font-size: 20rpx;
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
bottom: -40rpx;
|
||||
color: #393a41;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
height: 30rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user