vant组件popup顶部和底部固定元素

问题:

如果popup里面的内容超出他的高度,用f12审查可以看到popup的位置是在移动的,所以使用sticky组件或者fixed属性都没有效果

方案:

限制popup无法滚动,在popup中设置一个父盒子和一个子盒子,父盒子设置不能滚动,子盒子设置高度和可以滚动,再给需要固定的元素设置绝对定位就可以相对于父盒子固定

效果

html

  <van-popup
    v-model:show="showPopup"
    position="bottom"
    round
    :style="{ height: '17rem', overflow: 'hidden' }"
  >
    <div class="popup_box">
      <div class="popup_top">
        <div class="title">筛选条件</div>
        <van-icon name="cross" @click="showPopup = false" />
      </div>
      <div class="popup_bottom">
        <div class="reset_btn">重置</div>
        <div class="confirm_btn">完成</div>
      </div>

      <div class="popup_main">
        <div v-for="(item, index) in 40" :key="index">
          好高大上的共和国的发掘进口的发掘卡迪夫
        </div>
      </div>
    </div>
  </van-popup>

css

.popup_box {
  height: 17rem;
  background-color: #fff;
  padding-top: 1.28rem;
  padding-bottom: 1.31rem;
  overflow: hidden;
  position: relative;
  .popup_top {
    width: 10rem;
    height: 1.28rem;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    .van-icon-cross {
      font-size: 0.43rem;
      color: #181818;
      margin-left: 3.21rem;
    }
    .title {
      margin-left: 4.15rem;
      height: 0.43rem;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 0.43rem;
      color: #181818;
      line-height: 0.43rem;
    }
  }
  .popup_bottom {
    width: 10rem;
    height: 1.31rem;
    
    position: absolute;
    bottom: 0;
    display: flex;

    .reset_btn {
      width: 4rem;
      height: 1.31rem;
      background: #fff;
    }
    .confirm_btn {
      width: 6rem;
      height: 1.31rem;
      background: #f84730;
    }
  }
  .popup_main {
    height: 100%;
    overflow-y: scroll;
    background-color: #fcf;
  }
}