uni-app中scroll-view的高度

点击弹出滚动列表模态框

最新推荐文章于 2025-09-20 14:11:57 发布

原创最新推荐文章于 2025-09-20 14:11:57 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

uniapp 专栏收录该内容

8 篇文章

订阅专栏

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

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

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