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

news2024/10/7 14:31:42

起因

在微信小程序中使用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.coloradmin.cn/o/1276523.html

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

相关文章

Chrome 拓展开发系列:什么是 Chrome 拓展?

文章目录 Chrome 拓展&#xff08;Chrome Extension&#xff09;是什么为什么使用 Chrome 拓展&#xff1f;个性化浏览体验提高工作效率改善隐私和安全创新新功能 发展历史2009 年&#xff1a;初版发布2010 年&#xff1a;稳步增长2013 年&#xff1a;Chrome App 和扩展合并201…

企业存货库存综合分析全流程图

上期我们谈到了 诊断存货管理的4大维度&#xff0c;今天我们进一步全方位、全周期的分析企业内存货的问题。 企业存货是企业用于生产或销售的货品&#xff0c;是企业价值增值变现的载体&#xff0c;但是如果一旦没有产生交易&#xff0c;存货就很有可能带来损失。存货伴随着企业…

反序列化漏洞详解(一)

目录 一、php面向对象 二、类 2.1 类的定义 2.2 类的修饰符介绍 三、序列化 3.1 序列化的作用 3.2 序列化之后的表达方式/格式 ① 简单序列化 ② 数组序列化 ③ 对象序列化 ④ 私有修饰符序列化 ⑤ 保护修饰符序列化 ⑥ 成员属性调用对象 序列化 四、反序列化 …

深度学习今年来经典模型优缺点总结,包括卷积、循环卷积、Transformer、LSTM、GANs等

文章目录 1、卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNN&#xff09;1.1 优点1.2 缺点1.3 应用场景1.4 网络图 2、循环神经网络&#xff08;Recurrent Neural Networks&#xff0c;RNNs&#xff09;2.1 优点2.2 缺点2.3 应用场景2.4 网络图 3、长短…

ZeroTier外网访问实验室Linux服务器

ZeroTier外网访问实验室Linux服务器 1、在ZeroTier上创建一个自己的Network 进入ZeroTier的官网https://www.zerotier.com/注册一个账号 注册完之后登录进去&#xff0c;创建自己的Network 创建完之后来到IPv4的分配管理&#xff0c;选择主机位只有后8位的IP&#xff0c;才能…

Windows安装Mysql Workbench及常用操作

Mysql Workbench是mysql自带的可视化操作界面&#xff0c;功能是强大的&#xff0c;但界面和navicat比&#xff0c;就是觉得别扭&#xff0c;但其实用惯了也还好&#xff0c;各有特色吧。这里记录一下常用的操作。 官方手册&#xff1a;MySQL Workbench 一、安装 1. 下载 官方…

C++可表示的数(数组前面2个数的和)

void 可表示的数&#xff08;数组前面2个数的和&#xff09;() {int aa[]{1,2,3,4,5,6,7,8,9}, j 0, z 1, jj z, n 9, ge 0;string a "";while (j < n)//缘由https://bbs.csdn.net/topics/396063706?page1#post-410898529{if (jj < n)if (aa[j] aa[z] …

深入浅出强化学习

目录 一、强化学习的概念 二、强化学习的特点 三、强化学习的训练过程 一、强化学习的概念 强化学习是一种机器学习方法&#xff0c;旨在教会算法如何通过与环境的交互来进行学习和决策。与传统的监督学习和无监督学习不同&#xff0c;强化学习侧重于学习与奖励和惩罚&#…

OSI七层模型的前三层

开发中我们常见的网络设计和网络排查等&#xff0c;用到的网络层一般是tcp/ip第四层&#xff0c;也称OSI 网络层&#xff0c;很少去关心前三层的网络层、数据链路层、物理层&#xff0c;脑海里想到这三层的数据流转&#xff0c;脑海里都是抽象的画面。 本篇浅显的梳理前三层中各…

spring boot 3.2.0 idea从零开始

spring boot 3.2.0 idea从零开始 最新的spring initilizer 不再支持低版本java&#xff0c;只能选择17、21 。 我也被迫尝试下最新版本的java。 jdk下载地址 自定义好artifact和group之后点击下一步。 在这里选择需要的组件&#xff0c;我准备做web项目所以只选择spring web …

Navicat Premium 16.3.3 Windows x64 Crack

增强您的表现。 Navicat 16 具有许多改进和功能&#xff0c;可以满足您的数据库开发需求。凭借 100 多项增强功能和全新界面&#xff0c;您可以探索构建、管理和维护数据库的新方法。构建时考虑到可用性。 Navicat 16 引入了许多 UI/UX 改进&#xff0c;以最大限度地提高您的效…

C++浅谈Actor模型及其应用

文章目录 0 引入1、理解1.1 为什么会出现Actor这种模型呢&#xff1f;1.2 Actor如何解决 2、应用1.SkyNet2.Erlang3.RabbitMQ 3、引用 0 引入 最近发现Actor模型其实我在工作中已经不知不觉实现了&#xff0c;最起码有这些影子。 1、理解 Actor模型是一种轻量级的并发编程模型…

Android--Jetpack--Lifecycle详解

富贵本无根&#xff0c;尽从勤里得 一&#xff0c;定义 Lifecycle 是一个具备宿主生命周期感知能力的组件。它持有组件&#xff08;Activity/Fragment&#xff09;生命周期状态信息&#xff0c;并且允许其观察者监听宿主生命周期状态变化。 顾名思义&#xff0c;Lifecycle的主…

[论文阅读]Sparse Fuse Dense

SFD Sparse Fuse Dense: Towards High Quality 3D Detection with Depth Completion 论文网址&#xff1a;SFD 论文代码&#xff1a;SFD 论文简读 本文主要关注如何利用深度完成技术提高三维目标检测的质量。论文提出了一种名为 SFD&#xff08;Sparse Fuse Dense&#xff0…

SQL server 2016安装

1、关系数据库的基本概念。 行&#xff1a;每行成为一条“记录”或“元组”&#xff0c;用于描述一个对象的信息。 列&#xff1a;每列称为一个“字段”或“属性”&#xff0c;用于描述对象的一个属性。 2、主键与外键。 主键&#xff1a;键&#xff0c;即关键字。主键由一个或…

CentOS或RHEL安装vscode

下载rpm安装包 网络下载或者下载到本地再上传到服务器&#xff0c;点击访问国内下载地址&#xff0c;不需要积分curl -fOL https://github.com/coder/code-server/releases/download/v4.19.1/code-server-4.19.1-amd64.rpm安装 rpm -i code-server-4.19.1-amd64.rpm关闭和禁用…

高端网站设计公司 -蓝蓝设计数据可视化大屏服务

UI设计公司-蓝蓝设计&#xff08;北京兰亭妙微科技有限公司&#xff09;是一支由清华美院毕业的专业团队组成的设计公司。我们的设计师们在大屏科研信息软件UI设计领域拥有多年的工作经验和丰富的行业知识。我们对设计充满热爱&#xff0c;设计不仅是我们的专业和职业&#xff…

locked1勒索病毒,刚攻击完海康威视系统,又再针对速达软件服务器攻击

导言&#xff1a; .locked、.locked1勒索病毒正成为数字安全的一大威胁。本文91数据恢复将深入介绍.locked、.locked1勒索病毒的特点、如何有效恢复被其加密的数据文件&#xff0c;以及预防这一数字噩梦的方法。如果您正在经历勒索病毒数据恢复的困境&#xff0c;我们愿意与您…

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

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

webGL开发学科演示项目方案

开发学科演示项目需要考虑到教育目标、互动性和用户体验。以下是一个可能的技术方案&#xff0c;可用于实现这样的项目&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.WebGL 框架&#xff1a; 选择…