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))
})
}
择善人而交,择善书而读,择善言而听,择善行而从。