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

起因

在微信小程序中使用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.mzph.cn/news/188450.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【概率统计】如何理解概率密度函数及核密度估计

文章目录 概念回顾浅析概率密度函数概率值为0&#xff1f;PDF值大于1&#xff1f;一个栗子 核密度估计如何理解核密度估计核密度估计的应用 总结 概念回顾 直方图&#xff08;Histogram&#xff09;&#xff1a;直方图是最直观的一种方法&#xff0c;它通过把数据划分为若干个区…

软件工程 - 第8章 面向对象建模 - 2 静态建模

静态建模&#xff08;类和对象建模&#xff09; 类和对象模型的基本模型元素有类、对象以及它们之间的关系。系统中的类和对象模型描述了系统的静态结构&#xff0c;在UML中用类图和对象图来表示。 类图由系统中使用的类以及它们之间的关系组成。类之间的关系有关联、依赖、泛…

Numpy进阶

NumPy进阶80题完整版

卓扬网林荣雄说:开盘30分钟便能看清股票的涨跌

在一些人眼中&#xff0c;炒股是一件再简单不过的事情了&#xff0c;他们认为只需要简单地买进卖出&#xff0c;就可以玩转股票了。话虽如此&#xff0c;但是要想真正立足于股市&#xff0c;简单的买进卖出是远远不够的。要想长期屹立于股市之中&#xff0c;广大股民还需要积累…

Adobe ColdFusion文件读取漏洞(CVE-2010-2861)

任务一&#xff1a; 复现漏洞 任务二&#xff1a; 尝试利用漏洞读取目标系统中的“opt/coldfusion8/license.txt"文件 1.环境搭建&#xff08;网上写的密码是admin&#xff0c;就用admin&#xff09; 2.看答案就是一层一层进行路径穿越攻击&#xff0c;这里要注意如果…

【动态规划】LeetCode-63.不同路径II

&#x1f388;算法那些事专栏说明&#xff1a;这是一个记录刷题日常的专栏&#xff0c;每个文章标题前都会写明这道题使用的算法。专栏每日计划至少更新1道题目&#xff0c;在这立下Flag&#x1f6a9; &#x1f3e0;个人主页&#xff1a;Jammingpro &#x1f4d5;专栏链接&…

matlab diff和gradient

gradient 求解梯度。 示例 FX gradient(F) 返回向量 F 的一维数值梯度。输出 FX 对应于 ∂F/∂x&#xff0c;即 x&#xff08;水平&#xff09;方向上的差分。点之间的间距假定为 1。 使用方法&#xff1a; x -2:0.2:2; y x’; z x .* exp(-x.^2 - y.^2); [px,py] gradien…

数据库-MySQL之数据库必知必会17-21章

第17章 组 合 查 询 创建组合查询 可用UNION操作符来组合数条SQL查询。利用UNION&#xff0c;可给出多条SELECT语句&#xff0c;将它们的结果组合成单个结果集。 **例子&#xff1a;**假如需要价格小于等于5的所有物品的一个列表&#xff0c;而且还想包括供应商1001和1002生产…

【Linux】:信号(三)捕捉

信号捕捉 一.sigaction1.基本使用2.sa_mask字段 二.可重入函数三.volatile四.SIGCHLD信号 承接上文 果信号的处理动作是用户自定义函数,在信号递达时就调用这个函数,这称为捕捉信号。由于信号处理函数的代码是在用户空间的,处理过程比较复杂,举例如下: 用户程序注册了SIGQUIT信…

MOS管的静电击穿问题

MOS管输入电阻很高&#xff0c;为什么一遇到静电就不行了&#xff1f; 静电击穿&#xff1a;由于静电的积累导致电压超过了原本MOS的绝缘能力&#xff0c;导致电流突然增大的现象。 MOS管基础知识了解&#xff1a; G极(gate)—栅极&#xff0c;不用说比较好认 S极(source)—源…

基于SSM框架的餐馆点餐系统的设计

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

2023年亚太杯数学建模A题——深度学习苹果图像识别(

Image Recognition for Fruit-Picking Robots 水果采摘机器人的图像识别功能 问题 1&#xff1a;计数苹果 根据附件 1 中提供的可收获苹果的图像数据集&#xff0c;提取图像特征&#xff0c;建立数学模型&#xff0c;计算每幅图像中的苹果数量&#xff0c;并绘制附件 1 中所有…

【Java 基础】13 异常

1.异常是什么 异常是指在程序运行过程中可能发生的、与正常执行流程不符的事件。这些事件可能包括错误、不合理的输入、资源不足等。在 Java 中&#xff0c;异常是通过 throw 语句抛出的&#xff0c;可以是 Java 内置的异常类&#xff0c;也可以是自定义的异常类。 2. 异常类…

阅读文献总结2023

阅读文献基于卷积神经网络多源融合的网络安全态势感知模型 阅读文献 基于卷积神经网络多源融合的网络安全态势感知模型 题目基于卷积神经网络多源融合的网络安全态势感知模型文章信息&#xff1a;年份2023发文单位山西财经大学收录刊会计算机科学 &#xff08;北大核心&#…

多线程(初阶五:wait和notify)

目录 一、概念 二、用法 &#xff08;1&#xff09;举个栗子&#xff1a; &#xff08;2&#xff09;wait和notify的使用 1、没有上锁的wait 2、当一个线程被wait&#xff0c;但没有其他线程notify来释放这个wait 3、两个线程&#xff0c;有一个线程wait&#xff0c;有一…

c++ pcl出现LNK2019 宏定义 PCL_NO_PRECOMPILE

问题&#xff1a;c pcl使用拟合圆柱时出现LNK2019问题&#xff1b; 说明&#xff1a;lib等配置没有问题&#xff1b; 解决方案 在上述代码中添加如下代码即可 #define PCL_NO_PRECOMPILE 是 C 中的预处理器指令&#xff0c;用于在代码中定义一个宏。而 #undef PCL_NO_PRECOM…

springBoot3.2 + jdk21 + GraalVM上手体验

springBoot3.2 jdk21 GraalVM上手体验 SpringBoot2.x官方已经停止维护了&#xff0c;jdk8这次真的得换了&#x1f923; 可以参考官方文章进行体验&#xff1a;https://spring.io/blog/2023/09/09/all-together-now-spring-boot-3-2-graalvm-native-images-java-21-and-virt…

C++基础 -25- 动态多态

静态多态在程序编译的时候&#xff0c;确定将要执行的状态。 动态多态在程序运行的时候&#xff0c;才能确定执行的状态。 下面举例实现动态多态 work函数接口通过传参不同做不同的工作 #include "iostream"using namespace std;class person {public:person(){}vi…

记一次移动云不同机器下的对等网络使用

1、清单 机器1的VPC&#xff1a; 子网&#xff1a;172.16.16.0/24 机器2的VPC 子网&#xff1a;172.27.27.0/24&#xff08;子网不能与机器1的子网相同&#xff0c;否则对等网络无法成功建立&#xff09; 2、添加对等网络 添加链接&#xff1a;https://console.ecloud.1008…

数字电源为什么一般用DSP控制,而不能用普通的单片机?

数字电源为什么一般用DSP控制&#xff0c;而不能用普通的单片机&#xff1f; 首先你要清楚&#xff0c;数字电源需要一个芯片具备什么功能&#xff1f; 1 能发PWM波 &#xff0c;并且具备保护关断功能&#xff1b; 电源对PWM发波 要求很高&#xff0c;精度要ns级甚至ps级的&…