在uni-popup使用overflow:scroll
失效问题。
原因:
uni-popup
最外层设置了@touchmove.stop.prevent="clear"
,禁止内部滑动,导致滑动没有效果。
结果:
去掉@touchmove.stop.prevent
即可。
但是
上面的修改可以使uni-popup
里面进行滚动,但是主页面也可以进行滚动,需要再次优化。
参考uniapp官网中uni-popup禁止滚动穿透
在 微信小程序/App
平台可使用page-meta
组件动态修改页面样式 ,
需要在data
中定义一个变量,用来表示 uni-popup
的开启关闭状态,并通过这个变量修改 page-meta
的 overflow
属性。
在 uni-popup
的 @change
事件中可以接受到 uni-popup
的开启关闭状态 ,并赋值给上面的变量
<template>
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
<view class="container">
<!-- 普通弹窗 -->
<uni-popup ref="popup" background-color="#fff" @change="change">
<!-- ... -->
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
show:false
}
},
methods: {
change(e) {
this.show = e.show
}
}
}
</script>
网友评论