当前位置:   article > 正文

uniapp u-modal模态框中使用scroll-view,滑动到底部父页面滑动_一个页面上面当内容超出时有滑动功能 ,这个页面上面还有一个u-modal,u-modal里面

一个页面上面当内容超出时有滑动功能 ,这个页面上面还有一个u-modal,u-modal里面
  1. 场景:用uniapp写h5页面嵌入app中,点击弹出弹框,弹框中展示内容可滑动。弹框使用uview组件库中的u-modal,可滑动区域使用scroll-view。
  2. 遇到的问题是:在安卓机上,scroll-view滑动到最底部时会触发主页面滑动,使用@touchmove.stop.prevent未起作用。
  3. 最终使用的解决方法是:弹出弹框时赋给主页面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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号