uniapp uni-popup组件在微信小程序中滚动穿透问题

news/2024/7/10 0:54:23 标签: uni-app, 微信小程序, 小程序, vue, 前端

起因

小程序>微信小程序中使用uni-popup组件时,出现滚动穿透,并且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>


内部滚动

内部滚动解决方式比较简单,在uni-popup里面加上一个scroll-view组件,并设置scroll-y属性为true就好。其他优化如下:

  • 将uni-popup组件的padding设置为0,是为了让滚动条出现在边上,而不是内部
  • scroll-view里面的view设置一个高度,是为了防止超出状态栏
<uni-popup ref="execPopup" background-color="#fff" @change="changePopup" style="padding: 0;">
    <scroll-view :scroll-y="true">
        <view class="popup_box" style="height: calc(100vh - 80px);padding: 20px;">
        </view>
    </scroll-view>		
</uni-popup>


http://www.niftyadmin.cn/n/5231336.html

相关文章

iOS Class Guard github用法、工作原理和安装详解及使用经验总结

iOS Class Guard是一个用于OC类、协议、属性和方法名混淆的命令行工具。它是class-dump的扩展。这个工具会生成一个symbol table&#xff0c;这个table在编译期间会包含进工程中。iOS-Class-Guard能有效的隐藏绝大多数的类、协议、方法、属性和 实例变量 名。 iOS-Class-Guard…

使用系统ProgressBar实现三色进度条

使用系统ProgressBar实现如图三色进度条&#xff1a; //布局中<ProgressBarandroid:layout_width"0dp"android:layout_height"8dp"android:layout_marginLeft"16dp"app:layout_constraintBottom_toBottomOf"id/photo"app:layout_c…

CentOS部署python Flask项目

CentOS部署python Flask项目 将项目打包成tar.gz包并上传到公网linux服务器(centos) 将整个文件夹压缩为xxx.tar.gz tar -zcvf xxx.tar.gz 文件夹名挑选文件进行打包 tar -zcvf xxx.tar.gz file1 file2 file3上传到linux服务器 scp xxx.tar.gz 用户名服务器ip:上传到服务…

WMS仓储系统引领零售物流数字化转型:高效库存与逆向处理新趋势

随着零售行业竞争的日益激烈&#xff0c;企业逐渐认识到作业效率和成本控制能力是决定竞争力的关键因素。为了更有效地管理和追踪仓库业务的物流和成本&#xff0c;WMS&#xff08;仓库管理系统&#xff09;迎来了广泛应用。大多数WMS产品源自ERP&#xff08;企业资源计划&…

Apache APISIX 体验指南

APISIX 体验指南 所有的 sh 脚本通过 git bash 执行。 出现错误仔细核对文档。 github 地址&#xff1a; 使用 docker 安装 apisix 确保本地安装 Docker 和 Docker-compose 如未安装参开以下文档安装&#xff1a; Docker&#xff1a;https://docs.docker.com/engine/install/c…

【分布式唯一id】产生原因及生成方案

为什么需要分布式唯一id&#xff1f; 在开发项目时&#xff0c;我们需要给每一个”角色“都打上唯一的标签&#xff0c;比如用户、订单、消息等都需要唯一的标识&#xff0c;以此来区分不同的用户、订单及消息。单体项目中使用数据库的自增主键作为唯一标识可能就绰绰有余了&am…

应用于智慧园区的AI边缘计算盒子+AI算法软硬一体化方案

工业园区多为生产型和物流型企业&#xff0c;劳动人员密集&#xff0c;外来人口多&#xff0c;农民工多&#xff0c;人员流动大&#xff0c;车流量大&#xff0c;易引发车祸、破坏公共设施和绿化工程等案件; 英码智慧园区方案&#xff0c;可实现100%管理所有出入人员&#xff1…

基于PaddleOCR的PPOCRLabel工具使用

前言 PPOCRLabel是一款适用于OCR领域的半自动化图形标注工具&#xff0c;内置PP-OCR模型对数据自动标注和重新识别。使用Python3和PyQT5编写&#xff0c;支持矩形框标注、表格标注、不规则文本标注、关键信息标注模式&#xff0c;导出格式可直接用于PaddleOCR检测和识别模型的训…