当前位置：首页 > uni-app

uniapp底部窗口

2026-02-06 01:17:04uni-app

uniapp底部窗口实现方法

在uniapp中实现底部窗口通常涉及自定义组件或使用官方提供的<uni-popup>组件。以下是几种常见方法：

使用uni-popup组件

安装uni-popup组件（HBuilderX中可直接导入）：

// 页面script部分
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
    components: { uniPopup },
    methods: {
        openBottomPopup() {
            this.$refs.popup.open('bottom')
        }
    }
}

模板部分：

<uni-popup ref="popup" type="bottom">
    <view class="popup-content">
        <!-- 底部窗口内容 -->
    </view>
</uni-popup>
<button @click="openBottomPopup">打开底部窗口</button>

自定义底部弹窗

通过CSS定位实现自定义底部窗口：

<template>
    <view>
        <button @click="showPopup = true">打开底部窗口</button>
        <view class="bottom-popup" v-show="showPopup">
            <view class="popup-mask" @click="showPopup = false"></view>
            <view class="popup-content">
                <!-- 内容区域 -->
                <button @click="showPopup = false">关闭</button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showPopup: false
        }
    }
}
</script>

<style>
.bottom-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
.popup-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
}
.popup-content {
    position: relative;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 20px;
    z-index: 1000;
}
</style>

动画效果增强

为底部窗口添加滑动动画：

uniapp底部窗口

.popup-content {
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.bottom-popup.show .popup-content {
    transform: translateY(0);
}