uniapp小程序底部弹窗选择

您可以通过在 `template` 中编写底部弹窗的布局和样式，然后在需要使用底部弹窗的页面引入该 `template`。当用户触发弹窗显示的事件时，使用 `uni.showModal` 方法将弹窗显示出来。示例代码如下：

1. 在 `template` 中编写底部弹窗的布局和样式，如下所示：

<!-- bottom-popup 组件 -->
<template name="bottom-popup">
  <view class="popup-main">
    <view class="popup-content">
      <!-- 弹窗内容区域 -->
    </view>
    <view class="popup-close">关闭</view>
  </view>
</template>

<!-- 引入 bottom-popup 组件 -->
<import src="../components/bottom-popup/bottom-popup"></import>

2. 在需要使用底部弹窗的页面引入 `template`，并在页面中定义触发弹窗显示的事件，如下所示：

<template>
  <view>
    <view class="btn" @tap="showPopup">显示底部弹窗</view>
  </view>
</template>

<script>
  export default {
    methods: {
      showPopup() {
        uni.showModal({
          title: '提示',
          content: '',
          showCancel: false,
          success: (res) => {
            // 将底部弹窗显示出来
            this.$refs.bottomPopup.show()
          }
        })
      }
    }
  }
</script>

<style>
  .btn {
    background-color: #409EFF;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    margin-top: 50px;
    cursor: pointer;
  }
</style>

3. 在页面中使用引入的 `template`，并给底部弹窗组件添加 `ref` 属性方便在页面中调用该组件的方法，如下所示：

<template>
  <view>
    <!-- 使用 bottom-popup 组件 -->
    <bottom-popup ref="bottomPopup"></bottom-popup>
  </view>
</template>

<script>
  import bottomPopup from '../components/bottom-popup/bottom-popup'
  export default {
    components: {
      bottomPopup
    }
  }
</script>

4. 在 `bottom-popup` 组件中编写显示和隐藏弹窗的方法，如下所示：

<template>
  <view class="popup-mask" @tap="hide">
    <view class="popup-container" @tap.stop>
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      show() {
        this.$nextTick(() => {
          this.$el.style.display = 'block'
          setTimeout(() => {
            this.$el.querySelector('.popup-container').classList.add('active')
          }, 100)
        })
      },
      hide() {
        this.$el.querySelector('.popup-container').classList.remove('active')
        setTimeout(() => {
          this.$el.style.display = 'none'
        }, 300)
      }
    }
  }
</script>

<style>
  .popup-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: none;
  }

  .popup-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: all 0.3s;
    transform: translateY(100%);
    padding: 20px;
  }

  .popup-container.active {
    transform: translateY(0);
  }
</style>

这样就可以在您的 uniapp 小程序中实现底部弹窗的选择功能了。