vant popup 内部关闭按钮会随着一起向上滚动，应该怎么改呢？

• Z时代
• 2024-03-12
• 分类：IT

<van-popup
        :show="modal.visible"
        closeable
        position="bottom"
        @click-overlay="modal.close()"
        @click-close-icon="modal.close()"
    >
        <div class="buy-popup-box">
            <div class="buy-popup-content">
                <div class="buy">buy</div>
            </div>
        </div>
    </van-popup>

.buy-popup-box {
    width: 100%;
    min-height: 450px;
    max-height: 86vh;
    background: #f5f5f5;
    padding: 8px;
    box-sizing: border-box;
    overflow-y: hidden;
    .buy-popup-content {
        width: 100%;
        // height: 100%;
        height: 400px;
        box-sizing: border-box;
        padding-top: 60px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        overflow-y: auto;
        .buy {
            height: 6000px;
            background-color: antiquewhite;
        }
    }
}

回答：

你可以给你的内容添加指定高度，在类buy-popup-box，然后让其在此区域滚动即可

自定义popup

<template>
  <van-popup v-model="visible" v-bind="$attrs" v-on="$listeners">
    <div class="header">
      <slot name="cancel">
        <span class="cancel-text" v-if="showCancelText" @click="close">{{ cancelText }}</span>
      </slot>
      <slot name="title">
        <span class="title van-ellipsis">{{ title }}</span>
      </slot>
      <slot name="confirm">
        <span class="confirm-text" v-if="showConfirmText" @click="confirm">{{ confirmText }}</span>
      </slot>
    </div>
    <div class="popup-content">
      <slot></slot>
    </div>
  </van-popup>
</template>
<script>
export default {
  name: 'CustomPopup',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    showCancelText: {
      type: Boolean,
      default: true
    },
    showConfirmText: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false
    };
  },
  mounted() {
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.visible = newVal;
      }
    },
    visible(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$emit('input', newVal);
      }
    }
  },
  methods: {
    // 显示
    open() {
      this.visible = true;
    },
    // 关闭
    close() {
      this.visible = false;
      this.$emit('cancel')
    },
    // 确认
    confirm() {
      this.$emit('confirm')
    }
  }
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 106px;
  padding: 0 32px;
  .cancel-text, .confirm-text {
    flex: 0 0 120px;
    font-size: 30px;
    cursor: pointer;
  }
  .cancel-text {
    text-align: left;
  }
  .confirm-text {
    color: @blue;
    text-align: right;
  }
  .title {
    flex: auto;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
  }
}
</style>

回答：

..buy-popup-box::after {
    content: '';
    border: 1px solid red;
    width: 100%;
    height: 500px;
    background: #eee;
}

试一下添加伪类的办法，这样是不会跟随弹窗的滚动的

以上是 vant popup 内部关闭按钮会随着一起向上滚动，应该怎么改呢？ 的全部内容， 来源链接： utcz.com/p/934452.html