
在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>