移动端app 操作webview   类似于在浏览器内打开网页左滑返回,因为uniapp的组件webview 操作不了返回,尤其是访问外部网址,没有网页通信可用的时候

首先

onShow() {
			const systemInfo = uni.getSystemInfoSync();
			this.screenHeight = systemInfo.screenHeight;

			console.log('屏幕高度:', screenHeight);
		},

在onShow 中获取屏幕高度,

然后

data() {
    return {
        wv:null
    }

},

onReady() {
			const currentWebview = this.$scope.$getAppWebview();
			this.wv = plus.webview.create(
				'https://www.baidu.com',
				'webview1', {
					top: '80px',
					height: `${this.screenHeight-80}px`
				}, {
					plusrequire: "none"
				}
			);
			this.wv.loadURL();
			currentWebview.append(this.wv);
			this.wv.show('slide-in-right', 300);
},

在uniapp的onReady中创建webview   把上面的weview 删除掉

因为我做了自定义导航栏所以top是80px,

最后  

methods: {
	onBackPress() {
		this.wv.back();
		return true
	},
}

在左滑屏幕返回事件拦截一下就完成了

本次参考文档 H5规范

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐