解决uView2.0 Picker 选择器 (u-datetime-picker) 背景滚动，页面穿透滚动的问题

最新推荐文章于 2024-09-06 15:59:52 发布

沈逸仙！！！！！！

最新推荐文章于 2024-09-06 15:59:52 发布

阅读量657

点赞数 8

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/c05011510/article/details/139519494

版权

<template>
	<page-meta :page-style="'overflow:'+(showPopUp?'hidden':'visible')"></page-meta>
	<view>
        <u--form labelPosition="top" :model="model1" :rules="rules" labelWidth="90px" ref="form1">
            <u-form-item label="议事开始时间" required prop="startTime" labelWidth="110px"
					@click="ksEvent(true)">
					<u-datetime-picker ref="datetimePicker" :show="dateStartShow" v-model="interViewDate" mode="datetime"
				:formatter="formatter" @cancel="ksEvent(false)" @confirm="dateStartSelect"></u-datetime-picker>
				</u-form-item>

        </u--form>
    </view>


<template>

<script>
data(){
return{
showPopUp:false

}
}

methods{
    			ksEvent(status) {
				this.dateStartShow = status
				this.eventPopUp(status)
			},
			endEvent(status) {
				this.dateEndShow = status
				this.eventPopUp(status)
			},
			eventPopUp(flag) {
				this.showPopUp = flag
				/* #ifdef H5 */
				if (flag) {
					document.documentElement.style.overflow = "hidden"
				} else {
					document.documentElement.style.overflow = "scroll";
				}
				/* #endif */
			},
}
</script>

可使用 page-meta 组件动态修改页面样式，

需要在 data 中定义一个变量，用来表示 uni-popup 的开启关闭状态，并通过这个变量修改 page-meta 的 overflow 属性。

在 uni-popup 的 @change 事件中可以接受到 uni-popup 的开启关闭状态，并赋值给上面的变量

uni-popup 弹出层 | uni-app官网