当前位置:首页 > javascript > vue > 正文内容

uniapp webview设置不全屏,设置自定义导航栏

hxing6413年前 (2022-06-17)vue3199

使用webview时默认填充整个屏幕的,这时候我们加个自己的导航栏被遮住出不来,所以我们需要自定义webview的高度,才能显示出导航栏,传入导航栏高度(单位px),调用下面方法即可


// 自定义webview高度
function setWebview(offset) {
    var height = 0;
    uni.getSystemInfo({
        success: (sysinfo) => {
        height = sysinfo.windowHeight - offset;
    },
    complete: () => {}
    });
    var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
    setTimeout(function() {
        var wv = currentWebview.children()[0];
        wv.setStyle({
            top: offset,
            height
        })
    }, 100);
}

setWebview(40) // 调用,假设导航栏高度为40,传入40即可


扫描二维码推送至手机访问。

版权声明:本文由星星博客发布,如需转载请注明出处。

本文链接:https://xingxinghan.cn/?id=391

分享给朋友:

“uniapp webview设置不全屏,设置自定义导航栏” 的相关文章

uniapp关于webview返回键返回上一页问题

在webview中嵌入h5,当打开了很多页面,要点好多次返回按钮才能关闭webview。解决方案:在onBackPress中调用如下方法,可直接返回function back() {     const currentWindo...

vscode vue3常用插件

volarvolar是一个针对vue的vscode插件,在写vue2时,通常使用vetur插件,volar用于vue3,与vetur不同的是,volar提供了更为强大的功能(使用时需要把vetur禁用,两者一起用会有冲突)Live Serverlive server可以直接启动一个服务,打开html...

UniApp H5项目指南:处理二维码生成和扫描操作

UniApp H5项目指南:处理二维码生成和扫描操作

在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。二维码的生成,使用了JS文件weapp-qrcode.js进行处理,而二维码扫码则是基于一个第三方组件的方式进行支持的,最后通过统一入...

Vue过渡动画之CSS过渡

Vue.js 是一个以数据驱动视图的前端框架,它提供了丰富的组件化特性来帮助我们创建交互丰富的 Web 应用程序。Vue 框架内置了一些过渡特效,以及钩子函数,让我们可以在过渡期间添加自定义 CSS 类来实现过渡效果。本文将着重讲解 Vue.js 中的 CSS 过渡,并介绍如何使用它来实现各种有趣的...

深入探索Vue自定义过滤器

Vue.js是一种流行的JavaScript框架,提供了很多有用的功能来构建交互式的Web应用程序。其中一个非常有用且经常被忽视的功能是自定义过滤器。通过使用自定义过滤器,我们可以在Vue应用程序中轻松地转换、格式化和处理数据。本文将深入探索Vue自定义过滤器的使用方法和实际应用。一、什么是Vue自...

uniapp 中 ScrollView 组件上拉分页怎么不滚动到最顶部

实现类似微信聊天页面,上拉加载更多历史聊天记录,每次上拉到顶部,界面自动会滚动到最顶部,我希望ScrollView不要滚动到最顶部,每次就停留在当前位置1,绑定scroll-view中scroll-into-view属性<scroll-view class="scroll-...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。