uni-app中scroll-view的高度

本文介绍如何使用uni-app实现一个可点击弹出并带有下拉滑动功能的模态框,详细展示了代码实现过程及样式设置,包括如何通过uni.getSystemInfo和uni.createSelectorQuery动态设置scroll-view高度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需要做一个点击弹出列表的模态框,这个列表可以下拉滑动

1、代码

<view @tap="showModal=true">{{form.organizationName}}</view>
<view class="moddal" v-if="showModal" @tap="showModal=false">
				<view class="moddal-content">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :style="{height:500+'rpx'} ">
					    <view class="list" v-for="(item, ind) in list" :key="ind"  @tap.stop="isCheckCustomer(item, ind)">
					    	<text class="t-icon ischeck" :class="selectIndex == ind ?'iconfuxuan--2': 'iconfuxuan--1'"></text>
					    	<view class="list-content">{{item.name}}</view>
					    </view>
					</scroll-view>
					
				</view>
			</view>

在这里,我给scroll-view设置的固定的高度,如果想给它设置动态高度,需要调用uni.getSystemInfo(OBJECT),可以获取屏幕高度,uni.createSelectorQuery(),获取节点距离顶部的高度

 

样式

.moddal{
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		top:0;
		background-color: rgba(0,0,0,.5);
		//height: 500rpx;
		z-index: 10;
	
		.moddal-content{
			padding: 30rpx;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			.list{
				position: relative;
				display: flex;
				margin-bottom: 40rpx;
				align-items: center;
				.ischeck{
					width: 30rpx;
					height: 30rpx;
				}
				.list-content{
					padding-left: 20rpx;
					color: #333333;
					flex: 1;
				}
			}
		}
		
	}

 

### 获取 `scroll-view` 组件高度的方法 在 uni-app 中,可以通过多种方式来获取 `scroll-view` 的实际渲染高度。一种常见的方式是利用 Vue.js 提供的数据绑定机制以及 UniApp 自带的选择器查询接口。 对于 HTML 部分已经定义好的结构[^1]: ```html <template> <view :style="{ height: scrollHeight + 'px' }"> <view class="swiper-item"> <scroll-view scroll-y style="height: 100%; width: 100%;" lower-threshold="50" > <view class="card">内容...</view> </scroll-view> </view> </view> </template> ``` 为了动态调整或读取 `scroll-view` 的尺寸,在 JavaScript (Vue) 方法中可以这样做: ```javascript export default { data() { return { scrollHeight: 0, // 初始设置为零 }; }, mounted() { // 使用生命周期钩子函数mounted确保DOM已加载完成 this.getScrollViewHeight(); }, methods: { getScrollViewHeight() { const query = uni.createSelectorQuery().in(this); query.select('.swiper-item').boundingClientRect(data => { if (data) { console.log('scrollView Height:', data.height); // 打印日志用于调试目的 this.scrollHeight = data.height; } }).exec(); // exec方法执行所有的select操作并返回结果 } } } ``` 此代码片段展示了如何通过 `uni.createSelectorQuery()` 创建一个选择器查询对象,并调用 `.select()` 来定位目标节点(这里是指定类名的元素)。一旦获得了该元素的信息,则可以直接访问其属性如宽度 (`width`) 和高度 (`height`) 等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值