uniapp底部弹出框

在uniapp中，可以使用uni-popup组件来实现底部弹出框的效果。

1. 在需要弹出底部框的页面中，引入uni-popup组件：

<template>
  <view>
    <button @click="showPopup">点击弹出底部框</button>
    <uni-popup ref="popup" position="bottom" :show="popupShow">
      <!-- 这里是弹出框的内容 -->
    </uni-popup>
  </view>
</template>

2. 在data中定义弹出框是否显示的状态：

export default {
  data() {
    return {
      popupShow: false
    }
  },
  methods: {
    showPopup() {
      this.popupShow = true;
    },
    hidePopup() {
      this.popupShow = false;
    }
  }
}

3. 在弹出框的内容中，添加关闭按钮或者其他操作来控制弹出框的关闭：

<uni-popup ref="popup" position="bottom" :show="popupShow">
  <view class="content">
    <!-- 这里是弹出框的内容 -->
    <button @click="hidePopup">关闭</button>
  </view>
</uni-popup>

注意，需要在弹出框的外层包裹一个view，设置其样式为position:fixed;bottom:0;left:0;width:100%;height:100% ，以实现全屏遮罩的效果。

<style>
.content {
  width: 100%;
  height: 200px;
  background-color: #fff;
  padding: 20px;
}

/* 全屏遮罩 */
uni-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>