主要方法 changeTabbarStyle()
<template>
<view>
<button @click="togglePopup">显示/隐藏弹出层</button>
<uni-popup ref="popup" @open="onPopupOpen" @close="onPopupClose">
<!-- 弹出层内容 -->
<view class="popup-content">这是一个弹出层</view>
</uni-popup>
</view>
</template>
<script>
export default {
methods: {
togglePopup() {
this.$refs.popup.open();
},
onPopupOpen() {
// 弹出层打开时,改变tabbar的样式
this.changeTabbarStyle(true);
},
onPopupClose() {
// 弹出层关闭时,恢复tabbar的样式
this.changeTabbarStyle(false);
},
changeTabbarStyle(isOpen) {
const tabbar = document.querySelector('.uni-tabbar');
if (tabbar) {
if (isOpen) {
tabbar.style.transition = 'transform 0.3s, opacity 0.3s';
tabbar.style.transform = 'translateY(100%)';
tabbar.style.opacity = 0;
} else {
tabbar.style.transition = 'transform 0.3s, opacity 0.3s';
tabbar.style.transform = 'translateY(0)';
tabbar.style.opacity = 1;
}
}
}
}
}
</script>
<style>
.uni-tabbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
transition: transform 0.3s, opacity 0.3s; /* 设置过渡效果 */
}
.popup-content {
/* 弹出层样式 */
padding: 20px;
background-color: #fff;
}
</style>