uni-app中scroll-view的高度
需要做一个点击弹出列表的模态框,这个列表可以下拉滑动1、代码<view @tap="showModal=true">{{form.organizationName}}</view><view class="moddal" v-if="showModal" @tap="showModal=false"><view class="moddal-content"
·
需要做一个点击弹出列表的模态框,这个列表可以下拉滑动
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;
}
}
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)