uniapp的webview实现左滑返回上一个页面

2023-11-10

uniapp默认左滑是关闭整个webview,而不是关闭当前页 实现思路:拦截webview的url跳转操作,将新url用webview组件重新打开,当左滑的时候,默认关闭的就是当前webview,继而跳转到上一次的页面中

<template>
	<view>
		<web-view :src="weburl" :update-title="false" :webview-styles="webviewStyles">
		</web-view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				// 进度条
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				weburl: ""
			};
		},
		onLoad(option) {
			console.log("接收到的url参数是:", option.weburl); //打印出上个页面传递的参数。
			this.weburl = option.weburl
		},
		onReady() {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var currentWebview = page.$getAppWebview();
			var url = currentWebview.children()[0].getURL();
			console.log('=== url ===', url);
			var wv = currentWebview.children()[0];
			wv.overrideUrlLoading({
				mode: 'reject',
				match: '.*'
			}, function(e) {
				console.log('reject url: ' + e.url);
				uni.navigateTo({
					url: `/pages/webbox/webbox?weburl=${e.url}`
				})
			});
		},
		onBackPress(e) {
			let pages = getCurrentPages()
			let page = pages[pages.length - 1];
			let currentPages = page.$getAppWebview()
			currentPages.close()
			return false
		},
		onNavigationBarButtonTap() {
			console.log("点击了标题栏按钮")
			uni.$emit("showMenu")
		},
		methods: {}
	}
</script>
 
<style lang="scss">
 
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp的webview实现左滑返回上一个页面 的相关文章

随机推荐

  • Anaconda安装教程

    Anaconda安装教程 前言 一 Anaconda是什么 二 安装Anaconda步骤 1 下载安装包 安装包下载方法一 安装包下载方法二 建议使用 查看操作系统位数方法 方法一 官网下载安装包 方法二 清华大学开源镜像站下载Anacon
  • window 中 anaconda 下载与安装

    下载 anaconda官网地址 Anaconda Anaconda Distribution 官网打开会看到如下显示 点击download进行下载 或者拉到最下面 选择以往的版本进行下载 windows根据自己电脑选择下载 也可点击下面的a
  • Maven 资源文件(Resources)的打包(package)与过滤(filter)

    资源文件 最常见的 XML Properties 配置文件 比如使用 Mybatis 时的 Mapper Spring 的 ApplicationContext 配置 打包 package 根据 Maven 的默认项目结构 资源文件放置在
  • Android Studio的升级

    一般大家自己电脑都可以自升级 直接在Android Studio中上面导航栏找到check for updates选项点击就行 而如果大家所在公司保密做的比较好 不允许访问外网就只能另想办法了 下面提供两种方案 一 增量更新 增量更新就是在
  • C++ std::thread多线程详解

    c 多线程详解 一 std thread线程创建 1 函数指针 2 Lambda函数 3 functor Funciton Object 4 非静态成员函数 5 静态成员函数 二 std thread线程停止 1 join函数 2 deta
  • 编译报错:error: no matching function for call to

    No matching function for call 表示当我们调用某些函数时 该函数的参数与函数定义的参数不匹配 因此 我们得到一个错误 No matching function for call 所以当我们继续向函数传递不正确类型
  • 小程序微信支付流程(商城余额支付,优惠券支付,积分抵消,微信支付)

    小程序微信支付的流程图 1 登录微信公众平台 开通微信支付功能 这是准备工作的第一步 确保小程序对应的支付功能已经开启 2 登录微信商户平台 该步骤需要获取两个参数 一个是商户号 一个是支付秘钥 如下图所示 注意秘钥自己要保护好 相当于支付
  • idea 2022.1 全新ui 配置

    idea 2022 1 全新ui 配置 版本 IntelliJ IDEA 2022 1 221 5080 210 build 其他的没有测过 以后再也不说大话了 丑陋 具体步骤 打开IDEA 双击shift 在弹出的搜索框中输入Regist
  • 程序部署到服务器服务无法启动问题

    问题描述 原先有一个程序在服务器正常运行 但是客户突然把重装了服务器系统 改为了 无限的未知 win2003 完整克隆版 V8 32位 虽然不太理解客户的心理 但是谁让人家是客户呢 老老实实重装环境部署程序 万幸一切正常 但是我想的太简单了
  • 关于2022年软件测试的5大趋势探讨

    随着数字化技术应用的广泛普及 业界对于软件测试的要求也在持续迭代与增加 当前 越来越多的企业和组织都相继采用了Agile 敏捷 和DevOps之类的软件开发方法 以鼓励和促进测试团队和开发团队之间的紧密协作 根据Gartner的预测 到20
  • deepin v20安装mysql

    deepin v20 换源和安装mysql 由于deepin v20不能直接安装mysql所以先进行换源 更换成阿里源 这样以后速度可以更快 修改文件 sudo vim etc apt sources list 删除内容 并添加以下内容 G
  • DDlog语言特征

    原文地址 这里写链接内容 DDlog是一种语法为datalog式 用来编写DeepDive应用的语言 一个ddlog程序会被编译成deepdive格式下的配置文件 我们通常用这个文件来运行我们的应用 一个ddlog程序由一组声明组成 这些声
  • 【Doxygen】Vscode 插件 DoxyGen Documentation Generator C语言详细设置

    DoxyGen Documentation Generatorc 这个VsCode插件可以设置C C 的doxygen格式自动填充 本文只介绍C语言的json文件配置 触发方式 doxdocgen c triggerSequence 输入
  • Eclipse查看JDK源码

    1 找到jdk 2 配置rt的源码
  • 关于Connection aborted等问题的解决

    错误类型 在爬虫中报如下的错误 requests exceptions ConnectionError Connection aborted RemoteDisconnected Remote end closed connection w
  • Win10远程桌面连接怎么用?(远程桌面连接教程)

    怎么开启远程桌面连接 电脑远程桌面连接怎么用 要使用远程桌面控制电脑 您需先在电脑上开启远程桌面连接并且两台电脑还需在同一个局域网中 否则您的设置端口转发才能使用远程桌面连 那么怎么开启远程桌面连接呢 具体操作步骤如下 步骤1 在Win10
  • Redis的String常用命令

    Redis 基础知识 不想key被更改 再key的后面加上nx eg 127 0 0 1 6379 gt set s 11 OK 127 0 0 1 6379 gt set ss 111 OK 127 0 0 1 6379 gt renam
  • Jest 单元测试术语解析:describe、it、expect、test

    jest测试代码片段 describe number test gt it 1 is true gt expect 1 toBeTruthy test 2 is true gt expect 2 toBeTruthy describe 描述
  • Vue研习录(08)——Vue引入Swiper知识详解及示例分析

    Vue研习录 08 Vue引入Swiper知识详解及示例分析 版权声明 一 Swiper 版权声明 本文原创作者 清风不渡 博客地址 https blog csdn net WXKKang 重拾前端记忆 记录学习笔记 现在进入Vue引入Sw
  • uniapp的webview实现左滑返回上一个页面

    uniapp默认左滑是关闭整个webview 而不是关闭当前页 实现思路 拦截webview的url跳转操作 将新url用webview组件重新打开 当左滑的时候 默认关闭的就是当前webview 继而跳转到上一次的页面中