轻作



重拾写作的乐趣

UniApp(uViewUI)弹出层滚动穿透问题

2020.03.06
  1. 动态修改页面属性

在网上搜了下，说要设置page-meta样式

<page-meta :page-style="{'overflow': scroll ? 'visible' : 'hidden' }">

如果每个有弹窗的页面都要额外再设置一个page-meta的话，这就很不方便了

  1. 我们看下uViewUI弹窗例子
<template>
    <view>
        <u-popup :show="show" @close="close" @open="open" @touchmove.stop="">
            <scroll-view scroll-y style="height: 123rpx">
                <text>出淤泥而不染，濯清涟而不妖</text>
                <text>出淤泥而不染，濯清涟而不妖</text>
                <text>出淤泥而不染，濯清涟而不妖</text>
                <text>出淤泥而不染，濯清涟而不妖</text>
                <text>出淤泥而不染，濯清涟而不妖</text>
                <text>出淤泥而不染，濯清涟而不妖</text>
            </scroll-view>
        </u-popup>
    </view>
</template>

只需要在u-popup加上

@touchmove.stop=""

就能阻止滚动事件向上传递

如果里面的内容需要滚动，可以使用scroll-view, 设置高度并且y轴溢出可滚动即可

发表评论