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

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

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐