uniapp移动端 web-view自定义动态设置高度

最新推荐文章于 2025-06-26 16:05:50 发布

xiao靌

最新推荐文章于 2025-06-26 16:05:50 发布

阅读量8.5k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： uniapp 移动端文章标签： css3 html5 前端

本文链接：https://blog.youkuaiyun.com/Xc_Wl/article/details/124858496

移动端同时被 2 个专栏收录

4 篇文章

订阅专栏

uniapp

3 篇文章

订阅专栏

本文介绍了在uniapp中使用web-view组件时如何自定义设置高度，包括通过uni.getSystemInfo获取屏幕高度，动态设置web-view的top和height属性，以及禁用页面缩放。解决方案涉及到延迟设置以确保页面正确渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天分享一个如何再web-view自定义设置高度

相信很多小伙伴会在uniapp里面试用web-view这个组件，但是想对web-view设置上下左右边距时一筹莫展，用margin没有效果。所以小编昨天去Hbuilder论坛和百度搜索了一下，找到了如何解决高度问题。

            // #ifdef APP-PLUS
            var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
			uni.getSystemInfo({
				//成功获取的回调函数，返回值为系统信息
				success: (sysinfo) => {
					height = sysinfo.windowHeight; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
				},
				complete: () => {}
			});
			var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			setTimeout(function() {
				var wv = currentWebview.children()[0];
				wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
					top:40 , //此处是距离顶部的高度，应该是你页面的头部
					height:  height , //webview的高度
					scalable: false, //webview的页面是否可以缩放，双指放大缩小,
				})
			}, 500); //如页面初始化调用需要写延迟
			// #endif

// #ifdef APP-PLUS
           var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
           uni.getSystemInfo({
               //成功获取的回调函数，返回值为系统信息
               success: (sysinfo) => {
                   height = sysinfo.windowHeight; //自行修改，自己需要的高度此处如底部有其他内容，可以直接---(-50)这种
               },
               complete: () => {}
           });
           var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
           setTimeout(function() {
               var wv = currentWebview.children()[0];
               wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
                   top:40 , //此处是距离顶部的高度，应该是你页面的头部
                   height: height , //webview的高度
                   scalable: false, //webview的页面是否可以缩放，双指放大缩小,
               })
           }, 500); //如页面初始化调用需要写延迟
           // #endif