<template> <view class="content"> <uni-nav-bar class="nav-bar" fixed :status-bar="true" :left-icon="back" :left-text="leftText" @clickLeft="onLeft" color="#ffffff" background-color="#2F78E4"> <view class="title">{{ title ? title : '微怀化' }}</view> </uni-nav-bar> <!-- <view class="status_bar"></view> --> <view id="content"></view> </view> </template> <script> import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'; export default { components: { uniNavBar }, onLoad(options) {}, data() { return { pageURL: 'https://www.huaihua.gov.cn/', webviewStyles: { progress: { color: '#f00' } }, webView: null, back: '', leftText: '', title: '微怀化' }; }, onReady() { // #ifdef APP-PLUS var that = this; const statusBarHeight = uni.getSystemInfoSync().statusBarHeight; const webView = plus.webview.create( this.pageURL, 'content', { top: statusBarHeight + 44, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值 //因为设置top之后 webview的高度依然不变会往下移 底部会被遮住 所以设置一下高度 height: uni.getSystemInfoSync().windowHeight - 44 - statusBarHeight, progress: { color: '#f00' } }, { preload: 'preload webview' } ); // 可直接通过以下方法获取preload值 var currentWebview = this.$scope.$getAppWebview(); //获取当前页面的webview对象 currentWebview.append(webView); //一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭 this.webView = webView; this.webView.addEventListener('loaded', this.loading, false); this.webView.onloading = this.loading; // #endif }, methods: { loading(event) { console.log(event); if (this.webView) { this.webView.canBack(e => { console.log('是否可返回:' + e.canBack); if (e.canBack) { this.back = 'back'; this.leftText = '返回'; } else { this.back = ''; this.leftText = ''; } }); this.onloaded(event); } }, onloaded(event) { const title = this.webView.getTitle(); if(title){ this.title = title; } }, onNext() { console.log('kalshdfkas'); this.back = 'back'; this.leftText = '返回'; }, onLeft() { if (this.webView) { this.webView.canBack(e => { if (e.canBack) { this.webView.back(); } }); } } } }; </script> <style> .content { display: flex; flex-direction: column; width: 100vw; height: 100vh; } .title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; width: 500upx; line-height: 30upx; text-align: center; } .nav-bar { z-index: 9999; } .status_bar { height: var(--status-bar-height); width: 100%; } </style>
处理uni-app打包webview的app返回键处理
最新推荐文章于 2024-08-07 19:53:19 发布