tabber
This commit is contained in:
pengxiaolong
@@ -1,259 +1,227 @@
|
||||
<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>
|
||||
|
||||
<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 @touchmove.stop.prevent="disabledScroll"> </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);
|
||||
// import moduleSelect from './moduleSelect.vue'
|
||||
import { getCurrentInstance, defineProps, onMounted, reactive, ref } from "vue";
|
||||
let showMiddleButton = ref(false);
|
||||
|
||||
// let showTabBar = ref(false);
|
||||
let showMiddleButton = ref(false);
|
||||
const props = defineProps({
|
||||
tabIndex: Number,
|
||||
});
|
||||
let tabList = reactive([
|
||||
{
|
||||
iconPath: "../../static/Pk.png",
|
||||
selectedIconPath: "../../static/PkClick.png",
|
||||
text: "PK",
|
||||
pagePath: "../../pages/Home/Home",
|
||||
middleClass: "",
|
||||
},
|
||||
{
|
||||
iconPath: "../../static/Forum.png",
|
||||
selectedIconPath: "../../static/Forumclick.png",
|
||||
// text: '消息',
|
||||
text: "论坛",
|
||||
pagePath: "",
|
||||
middleClass: "",
|
||||
},
|
||||
{
|
||||
iconPath: "../../static/jiahao.png",
|
||||
selectedIconPath: "../../static/jiahao.png",
|
||||
text: "",
|
||||
pagePath: "/pages/c/c",
|
||||
middleClass: "",
|
||||
},
|
||||
{
|
||||
iconPath: "../../static/Message.png",
|
||||
selectedIconPath: "../../static/Messageclick.png",
|
||||
text: "消息",
|
||||
// text: '社区',
|
||||
pagePath: "../../pages/Message/Message",
|
||||
},
|
||||
{
|
||||
iconPath: "../../static/Mine.png",
|
||||
selectedIconPath: "../../static/Mineclick.png",
|
||||
text: "我的",
|
||||
pagePath: "",
|
||||
middleClass: "",
|
||||
},
|
||||
]);
|
||||
onMounted(() => {
|
||||
setTabBar();
|
||||
// getSystemInfo()
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
tabIndex: Number
|
||||
})
|
||||
let tabList = reactive([{
|
||||
iconPath: '../../static/Pk.png',
|
||||
selectedIconPath: '../../static/PkClick.png',
|
||||
text: 'PK',
|
||||
pagePath: '../../pages/Home/Home',
|
||||
middleClass: ''
|
||||
},
|
||||
{
|
||||
iconPath: '../../static/Forum.png',
|
||||
selectedIconPath: '../../static/Forumclick.png',
|
||||
// text: '消息',
|
||||
text: '论坛',
|
||||
pagePath: '',
|
||||
middleClass: ''
|
||||
},
|
||||
{
|
||||
iconPath: '../../static/jiahao.png',
|
||||
selectedIconPath: '../../static/jiahao.png',
|
||||
text: '',
|
||||
pagePath: '/pages/c/c',
|
||||
middleClass: ''
|
||||
},
|
||||
{
|
||||
iconPath: '../../static/Message.png',
|
||||
selectedIconPath: '../../static/Messageclick.png',
|
||||
text: '消息',
|
||||
// text: '社区',
|
||||
pagePath: ''
|
||||
},
|
||||
{
|
||||
iconPath: '../../static/Mine.png',
|
||||
selectedIconPath: '../../static/Mineclick.png',
|
||||
text: '我的',
|
||||
pagePath: '',
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
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
|
||||
// });
|
||||
// }
|
||||
//判断中间按钮是否突出显示
|
||||
function setTabBar() {
|
||||
let tabLength = tabList.length;
|
||||
if (tabLength % 2) {
|
||||
showMiddleButton.value = true;
|
||||
let middleIndex = Math.floor(tabLength / 2);
|
||||
tabList[middleIndex].middleClass = "mid-button";
|
||||
}
|
||||
}
|
||||
const createModule = ref();
|
||||
|
||||
// }
|
||||
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;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
function openPopupQuantity() {
|
||||
createModule.value.open();
|
||||
}
|
||||
//组件返回关闭指令
|
||||
function closeSuccess() {
|
||||
// addSuccess.value.close();
|
||||
}
|
||||
//解决弹出层后页面还可以滚动
|
||||
const disabledScroll = () => {
|
||||
return false;
|
||||
};
|
||||
//tab点击事件
|
||||
function handlePush(item, index) {
|
||||
if (item.pagePath) {
|
||||
uni.switchTab({
|
||||
url: item.pagePath,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-middle {
|
||||
align-items: center;
|
||||
}
|
||||
.flex-middle {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.font-20 {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.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: #ffffff;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.tab-list {
|
||||
height: 100rpx;
|
||||
padding: 0; //解决偏移
|
||||
z-index: 0;
|
||||
}
|
||||
.tab-block {
|
||||
position: relative;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
// left: 0;
|
||||
z-index: 999;
|
||||
background-size: contain;
|
||||
width: 100vw;
|
||||
background-color: #ffffff;
|
||||
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-default {
|
||||
background-color: #ffffff;
|
||||
border-top: 1px #dddddd solid;
|
||||
}
|
||||
|
||||
.tab-list-middle {
|
||||
position: relative;
|
||||
.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;
|
||||
}
|
||||
// background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
flex: 1;
|
||||
.list-item {
|
||||
flex: 1;
|
||||
|
||||
.item-img-box {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-bottom: 9rpx;
|
||||
position: relative;
|
||||
}
|
||||
.item-img-box {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-bottom: 9rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
// width: 44rpx;
|
||||
// height: 42rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
// width: 44rpx;
|
||||
// height: 42rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.mid-button {
|
||||
position: relative;
|
||||
.mid-button {
|
||||
position: relative;
|
||||
|
||||
.item-img-box {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-bottom: 9rpx;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -104rpx;
|
||||
}
|
||||
.item-img-box {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-bottom: 9rpx;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -104rpx;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
.item-img {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
font-size: 20rpx;
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
bottom: -40rpx;
|
||||
color: #393a41;
|
||||
}
|
||||
}
|
||||
.item-text {
|
||||
font-size: 20rpx;
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
bottom: -40rpx;
|
||||
color: #393a41;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
height: 30rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.tab-bar {
|
||||
height: 30rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user