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

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

前言

最近在做一个非常小的项目,使用的是uni-app的前端框架,在使用过程中遇到了一个问题,就是如何是scorll-view自动填满屏幕上剩下的高度,在网上找了很多教程,但是详细的并不太多。此次就当是在学习过程中的一个记录吧!有需要的朋友可以拿走看看。

思路:

1.使用uni.getSystemInfo(OBJECT)API接口获取设备屏幕高度
2.使用uni.createSelectorQuery()获取元素到屏幕顶部的距离

实现过程:

1.页面部分的代码(只放需要获取的部分了其他部分根据情况来)

// 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()
		}
	})
},

总结

在操作过程中应根据实际的输出情况自行调正具体的内容,上面的代码已经亲测可用
完整代码 点击下载
效果图:
效果图
安利一门Java超级好课!
扫码下单输优惠码【csdnfxzs】再减5元,比官网还便宜!
Java超级好课

  • 17
    点赞
  • 58
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值