uniapp的web-view自动铺满问题解决
uniapp的web-view自动铺满解决,处理自动定位问题
·
web-view默认是绝对定位,所以需要采取static的方式去控制该视图
首先通过createSelectorQuery,获取整个该dom的高度,然后在getSystemInfoSync通过找到整个屏幕的高度,就能获得该视图的相对高度,
再通过plus.webview.create创建一个web-view. 注意一定要currentWebview.append(wv),append到主页面中,这样static的定位才能有效,原组件web-view的static的定位是无效的。
this.$nextTick(() => {
// setTimeout(() => {
let infos = uni
.createSelectorQuery()
.in(this)
.select('#pdf_id');
infos
.boundingClientRect(data => {
// console.log(data)*0.8
// 获取高度
console.log(data)
const {
windowHeight,
} = uni.getSystemInfoSync()
console.log((windowHeight-data.top)/windowHeight)
this.pdf_height=Math.round(((windowHeight-data.top)/windowHeight)*100*0.85)+'%'
this.$forceUpdate();
console.log(this.pdf_height+"************")
const urlStr = this.first_files[0].file_path; // 这里是获取的url值
this.pdfUrl = `${this.viewerUrl}?file=${encodeURIComponent(urlStr)}`;
// #ifdef APP-PLUS
var styles={};
styles.width='80%',
console.log(this.pdf_height+"---------")
styles.height=this.pdf_height,
styles.left='10%',
styles.bottom='0px',
styles.position="static"
wv = plus.webview.create(this.pdfUrl,"custom-webview",styles)
var currentWebview = this.$scope.$getAppWebview();
//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
currentWebview.append(wv);//一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭
// #endif
})
.exec();
// }, 500);
})
更多推荐
已为社区贡献11条内容
所有评论(0)