解决小程序web-view两个恶心问题

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

1.web-view覆盖层问题

问题由来

web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面。

所以这得多恶心。。。不仅铺满,还覆盖了普通的标签,调z-index都无解。

解决办法

web-view内部使用cover-view,调整cover-view的样式即可覆盖在web-view上。

cover-view

覆盖在原生组件上的文本视图。
app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件(类似flash层级高于div)。为了能正常覆盖原生组件,设计了cover-view。
支持的平台:
在这里插入图片描述

具体实现

<template><view><web-view :src="viewUrl" v-if="viewUrl" ><cover-view class="close-view" @click="closeView()"><cover-image class="close-icon" src="../../static/design/close-icon.png"></cover-image></cover-view></web-view></view>
</template>
.close-view{position: fixed;z-index: 99999;top: 30rpx;left: 45vw;.close-icon{width: 100rpx;height: 80rpx;}
}

代码说明:这里的案例是一个关闭按钮图标悬浮在webview上,点击图标可以关闭当前预览的webview。

注意

仅仅真机上才生效,开发者工具上是看不到效果的,如果要调整覆盖层的样式,可以先把web-view标签注释了,写完样式没问题再释放web-view标签。

2.web-view导航栏返回

问题由来

  • 小程序端 web-view 组件一定有原生导航栏,下面一定是全屏的 web-view 组件,navigationStyle: custom
    对 web-view 组件无效。

场景

用户在嵌套的webview里填写表单,不小心按到导航栏的返回了,就全没了。

解决办法

使用page-container容器,点击到返回的时候,给个提示。

page-container

页面容器。
小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等),用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。 为此提供“假页”容器组件,效果类似于 popup 弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口。

具体实现

<template><view><web-view :src="viewUrl" v-if="viewUrl" ><cover-view class="close-view" @click="closeView()"><cover-image class="close-icon" src="../../static/design/close-icon.png"></cover-image></cover-view></web-view><!--这里这里,就这一句--><page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container></view>
</template>export default {data() {return {isShow: true}},methods: {beforeleave(){this.isShow = falseuni.showToast({title: '别点这里',icon: 'none',duration: 3000})}}
}

结语

算是小完美的解决了吧,这里记录一下,看看就行,勿喷。

连夜更新安卓cover-view失效问题

由于之前一直用ios测试的,今晚才发现这个问题

解决办法

cover-view, cover-image{visibility: visible!important;z-index: 99999;
}

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/49798.shtml

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

相关文章

机会性加密技术:网络安全的新趋势

在当今数字化时代&#xff0c;网络安全已成为各行各业不可忽视的重要议题。随着网络攻击手段的不断演进&#xff0c;传统的加密方式已难以满足复杂多变的安全需求。机会性加密技术&#xff08;Opportunistic Encryption&#xff0c;简称OE&#xff09;&#xff0c;作为一种新兴…

基于微信小程序的健康饮食系统/健康饮食管理系统

摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的小程序应运而生&#xff0c;各行各业相继进入信息管理时代&…

Neo4j AuraDB 和本地安装的 Neo4j 数据库 的区别

Neo4j AuraDB 和本地安装的 Neo4j 数据库 的区别 Neo4j AuraDB 和本地安装的 Neo4j 数据库主要在以下几个方面有所不同&#xff1a; 托管与管理&#xff1a; AuraDB&#xff1a;完全托管的服务&#xff0c;Neo4j 负责所有的基础设施管理&#xff0c;包括安装、配置、维护和升级…

[Vulnhub] Acid-Reloaded SQLI+图片数据隐写提取+Pkexec权限提升+Overlayfs权限提升

信息收集 IP AddressOpening Ports192.168.101.158TCP:22,33447 $ nmap -p- 192.168.101.158 --min-rate 1000 -sC -sV Not shown: 65534 closed tcp ports (conn-refused) PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 6.7p1 Ubuntu 5ubuntu1.3 (Ubuntu Lin…

折线图时间统计

1、查询本月的数据 2、查询最近一个月数据 1、查询本月数据 Date startTime DateUtil.getStartDayOfMonth();Date endTime DateUtil.getEndDayOfMonth();//获取日期//[2024-07-01, 2024-07-02, 2024-07-03, 2024-07-04, 2024-07-05, 2024-07-06, 2024-07-07, 2024-07-08, 20…

前端面试宝典【Javascript篇】【2】

欢迎来到《前端面试宝典》&#xff0c;这里是你通往互联网大厂的专属通道&#xff0c;专为渴望在前端领域大放异彩的你量身定制。通过本专栏的学习&#xff0c;无论是一线大厂还是初创企业的面试&#xff0c;都能自信满满地展现你的实力。 核心特色&#xff1a; 独家实战案例…

人工智能与机器学习原理精解【8】

文章目录 马尔科夫过程论基础理论函数系的定义、例子和分类一、函数系的定义二、函数系的例子三、函数系的分类 勒贝格积分一、定义二、计算三、例子 参考文献 马尔科夫过程论 基础 如果 α 是 ( G 1 , A 1 ) 到 ( G 2 , A 2 ) 的可测映象&#xff0c; β 是 ( G 2 , A 2 ) 到…

jackson序列化(jackson codec)

Jackson 是一个用于 Java 平台的开源 JSON 库&#xff0c;它提供了灵活且高效的方式来处理 JSON 数据的序列化(Java对象 → JSON字符串)和反序列化(JSON 字符串→ Java对象)。 以下是 Jackson 的一些主要特点和功能&#xff1a; 高性能&#xff1a;Jackson 通过使用基于流的处理…

国内环境,怎么做开源才能兼顾生存和情怀?

回答一个朋友提的问题—— 在国内&#xff0c;开源怎么做呢&#xff1f;老夫结合自己多年在开源和商业领域的经历与见闻聊聊。 首先来说&#xff0c;毋庸置疑&#xff0c;开源是对传统的商业模式的一种颠覆&#xff0c;它以一种免费开放的姿态赢得了Hacker群体的心&#xff0c…

mac OS matplotlib missing from font(s) DejaVu Sans

如果能搜索到这篇文章&#xff0c;我猜你遇到了和我一样的问题&#xff1a;matplotlib绘图中文乱码。如下&#xff1a; 出现这个问题的原因是&#xff1a;matplotlib使用的字体列表中默认没有中文字体。 这里说一种解决方案&#xff1a;我们可以在文件中手动指定matplotlib使用…

微信小程序-使用Component方法代替Page方法构造页面

一.使用Component方法的前提条件 在小程序js文件里使用Component方法代替Page方法需要在json文件里面定义usingComponents属性 {"usingComponents": {} }二.注意事项 1.在page页面里使用的钩子函数和事件监听方法都需要写在methods对象里面 methods:{update(){thi…

WHAT - Web Components 和 Vue、React 的模块化组件

目录 Web Components介绍组件库1. Lit2. Vaadin3. Shoelace4. Stencil5. FAST6. Ionic7. UI5 Web Components8. PatternFly Elements使用和选择指南结论 与 Vue 或 React 组件的区别1. 原生 vs 框架依赖2. 样式和 DOM 隔离3. 使用和学习曲线4. 状态管理和生命周期 专题&#xf…

二叉树详解-第一篇 树以及二叉树的概念

目录 ​编辑 1.树的概念及结构 1.1树的概念 1.2树的特点 1.3树的相关概念 1.4树的表示 2.二叉树的概念及结构 2.1二叉树的概念 2.2特殊二叉树-满二叉树和完全二叉树 1.满二叉树的概念及性质 2.完全二叉树的概念及性质 2.3二叉树的性质(重点) 2.4二叉树的存储 1.顺…

LeetCode - #103 二叉树的锯齿形层序遍历

文章目录 前言1. 描述2. 示例3. 答案关于我们 前言 我们社区陆续会将顾毅&#xff08;Netflix 增长黑客&#xff0c;《iOS 面试之道》作者&#xff0c;ACE 职业健身教练。&#xff09;的 Swift 算法题题解整理为文字版以方便大家学习与阅读。 LeetCode 算法到目前我们已经更新…

沉淀硬化不锈钢压缩弹簧的主要特性

沉淀硬化不锈钢&#xff0c;作为一种兼具高强度与耐腐蚀性的合金材料&#xff0c;被广泛应用于制造高性能的压缩弹簧&#xff0c;尤其是在苛刻环境下的应用需求。以下是对沉淀硬化不锈钢压缩弹簧主要特性的科普介绍&#xff1a; 良好的耐蚀性 沉淀硬化不锈钢与304不锈钢拥有相似…

做个牛奶配送小程序商城是怎样的

商家线上经营奶品&#xff0c;主要是成品包装品牌奶或散奶周边客源生意模式等&#xff0c;无论哪些模式&#xff0c;本身奶产品的需求度就不低&#xff0c;自然也有着大量客户&#xff0c;农场/品牌厂商/经销商/小摊贩&#xff0c;除了线下实体店发展外&#xff0c;线上要完善本…

SpringCloud断路器的使用与原理解析

Spring Cloud断路器是在分布式系统中实现容错的一种方式。它的原理是通过在调用链路上添加断路器,当某个服务的调用出现故障或超时时,断路器会自动迅速地切换到快速失败模式,防止故障扩散,从而保护整个系统的稳定性。 Spring Cloud断路器的使用与原理解析如下: 一、使用断…

KunDB4.0:安全能力与Oracle兼容性提升,支持跨系统多租户部署

KunDB是星环科技自主研发的分布式交易型数据库&#xff0c;高度兼容Oracle和MySQL&#xff0c;提供数据强一致、高可用、高性能、高扩展、应用透明等能力&#xff0c;可在云上和物理机上容器化部署运行&#xff0c;一站式解决企业数据存储、管理、计算与安全性问题。 过去半年…

数据结构经典测题3

1. 设有定义&#xff1a; char *p; &#xff0c;以下选项中不能正确将字符串赋值给字符型指针 p 的语句是【多选】&#xff08; &#xff09; A: pgetchar(); B: scanf("%s",p); C: char s[]"china"; ps; D: *p"china"; 答案为ABD A选项&…

SQL Server中 LOP_FORMAT_PAGE日志记录解释

在SQL Server中&#xff0c;LOP_FORMAT_PAGE是日志记录的一种类型&#xff0c;用于描述页面的格式化操作。了解LOP_FORMAT_PAGE详细的背景和任务类型有助于深入理解SQL Server的内部机制&#xff0c;尤其是在恢复和日志管理方面。以下是有关LOP_FORMAT_PAGE的详细解释&#xff…