uniapp 解决弹窗滚动冲突

2021-08-18  本文已影响0人  阳光下的美好_6e13

问题

页面是可以滚动的长列表,弹窗也是列表可以滚动。

解决

弹窗时禁止弹窗下的页面滑动。弹窗时底层页面不超出一整屏,所以再在弹窗上滑动时便不会触发底层的滚动事件,自然不会再有滚动穿透这样的问题。
注意:一定是设置底部最外层的样式,弹窗时如示例 &.all-list

示例代码:

<template>
    <!--底层页面-->
    <view class="content" :class="showPop ? 'all-list': ''">
        <!-- 列表 Pop-->
        <view class="pop" v-if="showPop">
        </view>
    </view>
    
</template>

<script>
    export default {
      data() {
            return {
                showPop:false,//弹窗是否显示              
            }
        },
</script>

<style>
<!-- 弹窗后底层样式-->
  &.all-list{
        overflow: hidden;
        position:fixed;
        height: 100%;
        width: 100%;
}
</style>
上一篇 下一篇

猜你喜欢

热点阅读