[uniapp]弹窗布局升级版

2024年9月8日 10:20 by wst

接上一篇：[uniapp]弹窗布局最佳实践，这里给出更优的方案。

pop-main中的内容有时会比较多，如果采用固定高度就会有部分内容被遮挡。最好的办法是让它可以滚动。经过优化的代码如下：

<template>
  <view>
    <button type="primary" @click="openWindow">打开弹窗</button>
  </view>
  <zwyPopup :ishide='show' width="80%" height="40%" radius="16rpx">
    <view class="pop-head">
      确定要全单退菜吗？
    </view>
    <view class="pop-content">
      <scroll-view class="pop-main" scroll-y>
        这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,
        这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,
        这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,
        这里是内容,这里是内容,这里是内容,
      </scroll-view>
      <view class="btn-zone">
        <button type="primary" size="mini">
          确定
        </button>

        <button @click="show = false" size="mini">
          取消
        </button>
      </view>
    </view>
    <view class="close" @click="show = false">✕</view>
  </zwyPopup>
</template>

<script setup>
import { ref } from 'vue';
import { zwyPopup } from '../../components/zwy-popup/zwy-popup.vue';

var show = ref(false);

function openWindow(){
  show.value = true;
}

</script>

<style lang="scss" scoped>

.pop-head {
  text-align: center;
  border-bottom: 2rpx solid #ccc;
  padding: 20rpx;
}

.pop-content {
  width: auto;
  height: 80%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: start;
  padding: 20rpx;

  .pop-main{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: start;
    overflow-y: scroll;
    background-color: #fff;
  }

  .btn-zone {
    margin: 20rpx 0;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    font-size: small;

    button {
      margin: 5rpx 10rpx;
    }
  }
}

.close {
  width: 60rpx;
  height: 60rpx;
  color: #FFFFFF;
  line-height: 60rpx;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  position: relative;
  bottom: -10%;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>