uni-app 如何设置web-view 不全屏,不自动铺满,动态控制web-view的高度

<template>
	<view class="">
<!--        <u-navbar :fixed="true" :title="titleName" :autoBack="false" @leftClick="goBack"-->
<!--                  :height="navHeight" :title-width="650" border="false"></u-navbar>-->

        <u-navbar :fixed="true" :title="titleName" :autoBack="true"
                  :height="navHeight" :title-width="650" border="false"></u-navbar>
        <web-view :src="urll" ></web-view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
		titleName: "",
                urll:'',
                navHeight: 95 //80
            }
        },
        onLoad(item) {
            this.urll = item.URLS
			this.titleName = JSON.parse(decodeURIComponent(item.titleName));
            // this.urll = "../../../hybrid/html/newsIndex.html"
            // this.urll = "http://www.baidu.com"



            // var that = this;
            // var height = 0; //定义动态的高度变量,如高度为定值,可以直接写
            // var statusBarHeight = 0;
            // uni.getSystemInfo({
            //     //成功获取的回调函数,返回值为系统信息
            //     success: (sysinfo) => {
            //         height = sysinfo.windowHeight - that.navHeight - sysinfo.statusBarHeight; //自行修改,自己需要的高度
            //         statusBarHeight = sysinfo.statusBarHeight;
            //     },
            //     complete: () => {}
            // });
            // var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
            // setTimeout(function() {
            //     var wv = currentWebview.children()[0];
            //     wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度,单位为px
            //         top: that.navHeight,//that.navHeight + statusBarHeight,
            //         height: height,
            //         scalable: true
            //     })
            // }, 500); //如页面初始化调用需要写延迟


            // #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:65 , //此处是距离顶部的高度,应该是你页面的头部 40  65
                    height:  height , //webview的高度
                    scalable: true, //webview的页面是否可以缩放,双指放大缩小,
                })
            }, 500); //如页面初始化调用需要写延迟
            // #endif

        // 原文链接:https://blog.csdn.net/Xc_Wl/article/details/124858496

        },
        methods:{
            goBack(){
                uni.redirectTo({
                    url: '../news/index'
                });
                // uni.reLaunch({
                //     url: '../news/index'
                // });
                // uni.reLaunch
            }
        }
    }
</script>

<style lang="scss">

</style>

		clickBtn(item) {
			uni.navigateTo({
			    url:'/views/zhengxie/knowledge/webView?URLS=' + item.url 
					+'&titleName='+encodeURIComponent(JSON.stringify(item.name))
			})
		}
posted @ 2022-09-23 16:25  寒冷的雨呢  阅读(2763)  评论(0编辑  收藏  举报