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

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

hxing6412年前 (2022-06-17)vue2840

使用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即可


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

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

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

分享给朋友:

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

Vue3源码之createApp

Vue.js 3中的createApp是用于创建一个Vue应用的函数。它的原理可以简单地解析为以下几个步骤:1. 创建一个应用实例:createApp函数会返回一个应用实例,该实例代表整个Vue应用的根实例。2. 组件注册:通过app.component方法,可以注册全局组件或局部组件。全局组件可以...

uniapp h5设置代理解决跨域问题

在manifest.json文件中 h5 属性中加入如下代码:"h5": {     "devServer": {       &nbs...

vue 路由 vue-router

vue 路由 vue-router

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

【Vue】详解Vue组件系统

Vue是一款流行的JavaScript框架,它的组件系统是它最重要的特性之一。Vue组件系统允许开发人员将UI界面划分成独立、可重复使用的组件,从而提高代码的可维护性和可重用性。本文将详细介绍Vue组件系统的各个方面。组件的定义在Vue中,一个组件是由一个Vue实例构成的。组件通常包含一个模板、一个...

深入探索Vue自定义过滤器

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

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

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

发表评论

访客

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