首页 javaWEB uni-app中scroll-view的高度问题,填满剩下的高度且高度自适应

uni-app中scroll-view的高度问题,填满剩下的高度且高度自适应

// scroll-view的代码 class名为sv 使用:style动态绑定高度 <scroll-view s…

// scroll-view的代码 class名为sv 使用:style动态绑定高度
<scroll-view scroll-y="true" class="sv" :style="{height:navHeight+'px'}">
	<view class="listItem" v-for="(item,index) in tvArry" :key="index" @click="skip">
		<view class="leftBox">
			<image :src="item.themb" class="leftImg"></image>
		</view>
		<view class="rightBox">
			<view class="title">{{item.name}}</view>
			<view class="sTitle">
				{{item.name}}{{item.time}}
			</view>
		</view>
	</view>
</scroll-view>

 

2.JS部分代码主要思路就是:通过屏幕可见高度-元素距离顶部的高度=屏幕剩余高度(元素高度);
data部分的代码:提前定义好接受数据的参数。

// data部分的代码
data() {
	return {
		pH:0, //窗口高度
		navHeight:0, //元素的所需高度
	}
},

 

onReady部分代码:每次刷新页面获取一次高度

onReady() {
	let that=this;
	uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
		success(res) { //成功回调函数
			that._data.pH=res.windowHeight //windoHeight为窗口高度,主要使用的是这个
			let titleH=uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名(class/id)
			titleH.boundingClientRect(data=>{
				let pH=that._data.pH;
				that._data.navHeight=pH-data.top  //计算高度:元素高度=窗口高度-元素距离顶部的距离(data.top)
			}).exec()
		}
	})
},

 

 

https://blog.csdn.net/qq_41906710/article/details/103628198

https://www.freesion.com/article/2175923322/

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

为您推荐

nodejs 整理记录

nodejs 整理记录

下载包 https://blog.csdn.net/m0_59878114/article/details/120274...
websocket测试html

websocket测试html

<!DOCTYPE html> <html> <head> <meta cha...
bigdemical两个数比较大小

bigdemical两个数比较大小

/*int result = bigdemical1.compareTo(bigdemical2) result = -...
Beetl2.7 中文文档

Beetl2.7 中文文档

Beetl目前版本是2.7.23,相对于其他java模板引擎,具有功能齐全,语法直观,性能超高,以及编写的模板容易维护等...
纯CSS实现多个便签在一行展示,拖动滚动

纯CSS实现多个便签在一行展示,拖动滚动

div <h2>请注意需要在移动端预览,PC端拖拽无效果</h2> <div class=...
返回顶部