101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<view class="view-popup">
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<view v-if="nav" style="width: 100%;" :style="{height: height + 'px'}"></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef MP-WEIXIN -->
|
|||
|
|
<view v-if="nav" style="width: 100%;height: calc( var(--status-bar-height) + 44px );"></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="center">
|
|||
|
|
<slot></slot>
|
|||
|
|
<view class="up" @click="close">
|
|||
|
|
<text>点击收起</text>
|
|||
|
|
<up-icon name="arrow-up"></up-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from "vue"
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
nav: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
show: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['close', 'click'])
|
|||
|
|
const close = () => {
|
|||
|
|
emit('close')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
const height = ref(0);
|
|||
|
|
uni.getSystemInfo({
|
|||
|
|
success: (res) => {
|
|||
|
|
// 获取手机顶部状态栏的高度
|
|||
|
|
const statusBarHeight = res.statusBarHeight || 0;
|
|||
|
|
|
|||
|
|
// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
|
|||
|
|
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|||
|
|
const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
|
|||
|
|
|
|||
|
|
// 计算顶部图标距离
|
|||
|
|
const topIconDistance = statusBarHeight + navBarHeight;
|
|||
|
|
|
|||
|
|
// 打印顶部图标距离
|
|||
|
|
console.log('顶部图标距离:', topIconDistance);
|
|||
|
|
height.value = topIconDistance;
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('获取系统信息失败:', err);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.view-popup {
|
|||
|
|
height: 100vh;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: rgba(#000, 0.3);
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 10;
|
|||
|
|
|
|||
|
|
.center {
|
|||
|
|
animation: slideDown 0.3s forwards;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.up {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 0 0 28rpx 28rpx;
|
|||
|
|
border-top: 1rpx solid #eee;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideDown {
|
|||
|
|
from {
|
|||
|
|
transform: translateY(-100%);
|
|||
|
|
/* 初始状态：向上偏移100% */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
/* 最终状态：无偏移 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|