uniapp小程序中使用web-view中的坑(cover-view安卓手机无法触发touch事件)巧妙解决

背景:uniapp开发的小程序中使用web-view引入H5页面,这个H5也是uniapp开发 需求:(1)增加一个解读报告按钮,仅可以上下拖拽(2)点击后携带参数跳转到小程序页面

错误实践:

首先想到的是使用cover-view来写这个解读报告按钮,有两种局限性:

cover-view覆盖在原生组件上的文本视图

1、安卓手机touch事件没触发(目前没找到解决方案) 2、cover-view中不能包含其他元素,所以uniapp中的movable-areamovable-view用不了

解决方案:

1、在uniapp的h5中写拖拽,使用movable-areamovable-view,代码如下: 2、uniapp中点击按钮跳转到小程序 index.html中加入如下代码:放到body下面

复制代码
	<script type="text/javascript" src="./static/uni-webview-js.js"></script>
	<script type="text/javascript" type="text/javascript">
	     // 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。注意uni sdk放到body下面
	        document.addEventListener('UniAppJSBridgeReady', function() {
	            uni.webView.getEnv(function(res) {
	                console.log('当前环境:' + JSON.stringify(res));
	            });
	        });
	</script>
xml 复制代码
<movable-area v-if="pdfSrc">
    <movable-view direction="all" damping="50" friction="0.5" scale="1.5" animation="ease" @click="freeInterpretation">
		<view class="dragOuter">
			<view>解读</view>
			<view>报告</view>
		</view>
    </movable-view>
</movable-area>
javascript 复制代码
freeInterpretation(){
	uni.webView.navigateTo({
            url: '/packageD/advanceReport/advanceReport?res_id='+this.options.res_id
	});
},

还有一种想法,给cover-view外层的view标签添加touch事件,还没去尝试

相关推荐
程序猿小D8 小时前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠8 小时前
AJAX的学习
前端·学习·ajax
JNU freshman8 小时前
vue 技巧与易错
前端·javascript·vue.js
落一落,掉一掉8 小时前
第十二周 waf绕过和前端加密绕过
前端
Asort9 小时前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee9 小时前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安9 小时前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼9 小时前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript
LRH9 小时前
时间切片 + 双工作循环 + 优先级模型:React 的并发任务管理策略
前端·react.js
不知名的前端专家9 小时前
UniApp USB存储设备U盘操作、读写原生插件
uni-app