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

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

hxing6413年前 (2022-06-17)vue3308

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

JavaScript
// 自定义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设置不全屏,设置自定义导航栏” 的相关文章

vue3 setup方法执行原理

Vue 3中的setup函数是在组件实例创建之前调用的一个特殊函数,它主要用于配置组件的状态和行为。下面是setup函数的执行原理的分析:在组件定义中,通过setup属性指定一个函数,例如:export default {     &nb...

vue 路由 vue-router

vue 路由 vue-router

前面的话  在Web开发中,路由是指根据URL分配到对应的处理程序。对于大多数单页面应用,都推荐使用官方支持的vue-router。Vue-router通过管理URL,实现URL和组件的对应,以及通过URL进行组件之间的切换。本文将详细介绍Vue路由vue-router 安装  在使用vu...

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

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

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

Vue中Mixin的应用与实践

在Vue.js中,Mixin是一种非常有用的技术,它允许我们将可复用的功能和逻辑抽象出来,并混入到组件中,从而实现代码的复用和组件的扩展。本文将深入探讨Vue中Mixin的应用与实践,包括Mixin的基本概念、实际应用场景以及相关的代码示例,最终总结如何合理地应用和实践Mixin特性。...

Vue中的防抖节流技术,提升用户交互体验

在Vue开发中,我们经常会遇到需要处理用户频繁操作的场景,例如搜索框输入联想、窗口大小改变等。这时,使用防抖节流技术能够有效地控制事件触发频率,提升用户体验和页面性能。 1. 防抖技术 防抖(Debounce)是指在事件被触发后,等...

uniapp运行APP报错reportJSException >>>> exception function:createInstanceContext, exception:white screen

今天分享个自己在工作中遇到的头疼问题,记录下,在使用pinia时,引入use模块,h5端没问题,我使用的是vue3,运行在APP端一直报错:reportJSException >>>> exception function:createInstanceContext, exc...

发表评论

访客

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