- 场景:用uniapp写h5页面嵌入app中,点击弹出弹框,弹框中展示内容可滑动。弹框使用uview组件库中的u-modal,可滑动区域使用scroll-view。
- 遇到的问题是:在安卓机上,scroll-view滑动到最底部时会触发主页面滑动,使用@touchmove.stop.prevent未起作用。
- 最终使用的解决方法是:弹出弹框时赋给主页面scrollLock类,使主页面固定住即不可滑动,关闭弹框时移除scrollLock类,通过isStopBodyScroll控制类的有无
<template>
<view :class="{'scrollLock':isStopBodyScroll}">
<u-modal :show="showModal">
<view class="slot-content">
<scroll-view scroll-y="true" >
......
</scroll-view>
</view>
</u-modal>
</view>
</template>
<script>
export default {
data() {
return {
isStopBodyScroll: false,
}
}
</script>
<style lang="scss" scoped>
.scrollLock {
width: 100%;
position: fixed;
}
</style>