用uni-app开发时使用web-view会覆盖掉固定定位的解决办法，移动端APP预览pdf文件

最新推荐文章于 2024-08-21 23:53:05 发布
最新推荐文章于 2024-08-21 23:53:05 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： uni-app 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mature_1/article/details/124005987
版权

不知道大家有没有在开发时遇到使用web-view会覆盖掉固定定位的问题

我在开发时候遇到的情况，在使用web-view会覆盖掉固定定位，无论是调整固定定位的层级（z-index）还是给web-view添加绝对定位调整负层级都没有效果，浏览器预览啥问题没有，但是在app里面看就看不到固定定位的东西

后来改成

<iframe :src="url" frameBorder="0" width="100%" scrolling="no" height="100%"></iframe>

使用iframe标签就可以显示出固定定位了

我这个是为了在移动端展示pdf文件，目前好像uni-app还不支持直接展示，我是把pdf转成图片，然后把图片放到一个网页里面，然后把网页展示出来。

展示pdf文件时，使用pdfjs，直接预览都试过，移动端都不显示

初见啊龙
关注
专栏目录
uniapp(全端兼容) - 最新详细实现预览pdf文件功能，uniapp安卓苹果app、H5网页、微信小程序、nvue等端打开本地或在线PDF文档进行预览，uniapp预览pdf教程（详细示例代码）
高级前端工程师
06-06 6072
uni-app，pdf，打开预览PDF，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，uniapp预览PDF，App端 实现pdf文件预览，在app端怎么预览pdf，网页h5怎么预览pdf，pdf下载、上传和预览，H5预览pdf文件，小程序预览pdf，nvue平台怎么打开预览pdf呢，除了uni.opendocument还有什么方法打开，预览pdf的插件，pdf预览组件，uni-app实现PDF预览功能，app查看下载pdf文件，如何做pd
uni-app在线预览pdf
weixin_67833657的博客
08-23 764
web-view在线预览pdf
uniapp: webview全屏遮挡住状态栏的解决方案
m0_59638694的博客
03-28 6138
uniapp的状态栏被webview给遮住了，怎么显示状态栏。转载的。
uniapp页面使用web-view加载网络url，导致底部组件被覆盖解决办法
zhanglei892721的博客
06-30 3016
<script> var wv;//计划创建的webview export default { onReady() { var px = uni.upx2px(120) var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译.
uniapp跳转webview下载pdf终极解决方案
最新发布
u011628993的博客
08-21 221
众所周知，uniapp的webview有特殊的安全策略，无法实现正常下载，下载会导致文件下载失败，那么该如何解决这个问题呢？官方提示可以将文件转blob、blob转base64进行下载，我研究了半天，发现这条路行不通，于是乎自己想出了另一方案。webview为泛微高代码平台开发的react的页面（这块经研究，应该啥语言开发的都可以，html、vue、react都行，无限制）；webview进行下载的时候，向uniapp发送消息，消息内容为文件的base64，让uniapp触发下载事件。
uniapp小程序中给web-view页面添加授权弹窗（使用cover-view组件覆盖实现该功能）
m0_47791238的博客
10-12 5115
web-view是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。也就是说，小程序中使用web-view打开网页，在页面上写的其它组件会直接被网页给覆盖住。使用cover-view组件覆盖实现该功能
uni-app vue3 setup nvue中webview层级覆盖问题
九段刀客的博客
02-25 836
核心就是这两行。
uniapp 设置底部不被覆盖
2201_75783276的博客
04-11 1076
中间列表部分，开启绝对定位，设置一下位置，并且overflow:auto 就可以滑动。
在uni-app中使用pdf.js实现在手机上打开pdf
11-04
uni-app是一个多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5等多个平台运行。而PDF.js是Mozilla开发的一个开源项目，专门用于在浏览器中渲染PDF文档，支持多种平台和浏览器，对于uni-app这样的跨...
uni-app 下载文件并保存到手机（带进度条）
热门推荐
mossbaoo的博客
10-20 1万+
uniapp下载文件并保存到手机（带进度条），结合uni.downloadFile，uni.saveFile，uni.openDocument，实现功能
uni-app入门
01-08
uni-app引入了一些新的组件，适应移动端开发需求： - `scroll-view`：可区域滚动视图容器 - `swiper`：可滑动区域视图容器 - `icon`：图标组件 - `rich-text`：富文本，用于渲染各种文字格式和图片 - `progress`：...
uniapp与webview之间的相互传值的实现
10-15
主要介绍了uniapp与webview之间的相互传值的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webview 覆盖 同页面组件 问题 && 点击事件
Wickedstepmother的博客
04-28 521
【代码】webview 覆盖 同页面组件 问题 && 点击事件。
uni-app中使用web-view解决手机顶部被遮挡和输入框被软键盘遮挡
努力奔跑的小不点
07-23 4236
onLoad() { var height=0;//定义动态的高度变量，如高度为定值，可以直接写 uni.getSystemInfo({ //成功获取的回调函数，返回值为系统信息 success: (sysinfo) => { height = sysinfo.windowHeight-44;//自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种 }, complete: () => { } }); var currentWebview
uniapp之Web-view遮挡导航方案
熊宗的博客
11-29 2464
方案一：pages.json定义原生导航 { "path": "pages/checkout/checkout", "style": { "app-plus": { "navigationBarTitleText": "个人中心", "titleNView": { "autoBackButton": false,
uniapp 微信小程序webview 踩坑
Raccon_的博客
08-31 5683
微信小程序的存在许多功能上的限制和约束，有些情况不得不去使用webview进行开发实现需求，比如原生无法满足（例如某团队维护SDK 只提供了WEB端jsSDK，且不维护小程序SDK）H5可以同时适用多端（适用范围更广）H5可以弥补小程序部分欠缺微信生态有部分限制（包大小，设计规范等）由于最近做的需求小程序不支持播放带有透明通道的视频，所以转到了webview这里总结下完整的开发流程和现有的各种解决方案: 开发阶段需要将不校验合法域名勾选上。
在uniapp的webview组件引用的网页内如何实时定位
做GIS梦的人
04-13 2297
背景 本人使用uniapp开发了一个app，其中App有个页面是地图界面（Mapbox开发），因为uniapp无法直接实现地图，最后用Webview组件嵌套了一个vue开发网页。其中有一个定位功能，最开始是用uniapp的getLocation方法，在非地图界面进行定位，然后把定位结果以url参数的方法传递到地图界面。后来客户就开发反馈了，说地图界面的定位不会更新。 为了解决在Webview里定位定位更新的问题，做了很多尝试，最开始以为因为uniapp打包成App时，其实所有的页面都是在Android的
小程序ios端自定义TabBar遮挡内容、TabBar被ios系统控制器遮挡的解决方案
jaqi.csdn
08-06 1790
<view class=""> <view v-if="isIphoneX" style="height: 1px;width:100%;"/> <!-- 解决遮挡内容 --> <view :class="isIphoneX?'isIphoneX footerButton':'footerButton'"> <!-- 解决ios导航条遮挡TabBar问题 --> </view> </view> 判断是否是ios
uniapp开发APP，map和video层级太高覆盖掉了我的cover-view怎么办？
life_wanghexu的博客
04-23 1万+
uniapp开发APP，map和video层级太高，cover-view不生效，官方给出两种解决方案， 1.不使用vue，而是使用nvue开发 2.使用原子窗体，其实也是类似nvue，只不过是nvue嵌在vue里面而已 nvue比较原生，样式css基于week写起来麻烦，我们可以先vue页面写了map，然后自定义原子窗体，位置在页面左上角 下面是findType.nvue文件 记得它的样式，是week写法，不支持scss，less等写法。 然后下面就是APP里面的效果图了 ..
如何在uni-app+vue3中使用pdfh5
07-13
在 Uni-app 中使用 PDFH5，可以通过以下步骤实现： 1. 安装依赖：在你的 Uni-app 项目根目录下，打开终端并执行以下命令安装 pdfh5 插件： ```bash npm install pdfh5 --save ``` 2. 引入插件：在需要使用 PDFH5 的页面中，打开该页面的 vue 文件，添加以下代码： ```vue <template> <view> <pdfh5 :src="pdfUrl"></pdfh5> </view> </template> <script> import pdfh5 from 'pdfh5' export default { components: { pdfh5 }, data() { return { pdfUrl: 'your_pdf_url' } } } </script> ``` 上述代码中，通过 `<pdfh5>` 标签引入了 PDFH5 组件，并通过 `src` 属性绑定了一个 PDF 文件的 URL。 3. 配置页面样式：为了确保 PDFH5 组件正常显示，你需要在页面的样式文件中添加以下代码： ```css /* 页面样式文件（xxx.vue） */ <style> .pdf-container { width: 100%; height: 100%; overflow: auto; } .pdf-container iframe { width: 100%; height: 100%; border: none; } </style> ``` 上述代码中，我们为 PDFH5 组件的包裹容器 `.pdf-container` 设置了适当的宽度和高度，并移除了 iframe 的边框样式。 4. 替换 `pdfUrl` 的值：将上述代码中的 `pdfUrl` 替换为你实际的 PDF 文件的 URL。 5. 运行项目：保存文件后，通过运行 Uni-app 项目来查看 PDF 文件的显示效果。 通过以上步骤，你就可以在 Uni-app + Vue3 中使用 PDFH5 来展示 PDF 文件了。请确保你已经提前准备好了 PDF 文件，并将其链接或路径正确地赋值给 `pdfUrl` 属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值