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);
							})

你可能感兴趣的:(前端,uni-app,javascript)