Vant2的Popup弹出层滚动问题IOS底部fixed定位失效问题

场景:

选择收货地址,调用vant2弹出层,通过自己的收货地址列表组件选择地址,在地址列表中也有添加地址组件,同理继续弹窗。不过在IOS中遇到“添加收货地址”按钮定位position:fixed失效问题

<div class="pay-block-title">我的收货地址</div>
<div class="pay-block-content flex flex-pack-justify flex-align-center" v-if="!address_id"  @click="myAddressShowFunc">
    <div class="flex flex-align-center addr-title" style="margin: initial"> 选择收货地址</div>
    <img class="jump-img" src="">
</div>

弹出层滚动设置:

1、:lock-scroll="false" 背景滚动不禁用

2、最外层加上 @touchmove.stop,禁用背景层

<!--选择收货地址-->
<div @touchmove.stop>
    <van-popup v-model="myAddressShow"
               :close-on-click-overlay="true"
               safe-area-inset-bottom
               :lock-scroll="false"
               round
               closeable
               position="bottom"
               :style="{ height: '70%', 'background-color': '#F1F3EC' }" >
        <div style="padding-top: 1.5rem">
            <myAddress :canselectaddr="true" :selected_address_id="address_id" @closeChange="address_id_func($event)"></myAddress>
        </div>
    </van-popup>
</div>

myAddress组件:收货地址列表,如下图所示

myAddress组件代码:

解决IOS底部fixed定位失效问题

1、添加收货地址”按钮:用了position:fixed IOS系统fixed不兼容,要把带fixed定位的元素,和滚动的元素分开来,不要混了层级,头部,底部都拿到外面来!!https://blog.csdn.net/jw19950424/article/details/80655125

2、弹出层中的fixed定位按钮如果被隐藏了,尝试调试定位按钮的层级z-index,vant弹出层z-index大概是2008

<div class="scroll-block">
滚动区域:收货地址列表;如上图弹出效果
</div>
<div class="bottom-btn-position">
    <div class="bottom-btn" @click="toAddAddress()" v-show="showAddBtn">
        添加收货地址
    </div>
</div>

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值