直播軟體app開發，CSS超出隱藏並且能滾動

直播軟體app開發，CSS超出隱藏並且能滾動

實現CSS程式碼：

height: 500rpx;
overflow-x: hidden;
overflow-y: scroll;

效果圖的程式碼：

<!-- 豆豆明細彈窗 -->
<view class="mxBoom" v-show="mxBoom">
<view class="mxBoomContent">
<view class="mxBoomTip">
苗豆明細
</view>
<view class="p_r mxTitle">
<view class="">
獲取日期
</view>
<view class="">
詳情
</view>
<view class="">
苗豆變更
</view>
</view>
<view class="jiluList">
 
<view class="p_r mxTxt" v-for="(item,index) in jiluList">
<view class="">
{{item.create_time}}
</view>
<view class="">
{{item.desc}}
</view>
<view class="">
{{item.values}}
</view>
</view>
</view>
</view>
<image :src="xIcon" class="xIcon" @click="mxBoom=false"></image>
</view>

 CSS

.mxBoom {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 999;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
 
.xIcon {
margin-top: 24rpx;
width: 70rpx;
height: 70rpx;
text-align: center;
position: relative;
left: 50%;
margin-left: -35rpx;
}
 
.mxBoomContent {
width: 80vw;
margin-left: 10vw;
margin-top: 120rpx;
height: 900rpx;
background-color: #FFFFFF;
border-radius: 40rpx;
 
.jiluList {
height: 500rpx;
overflow-x: hidden;
overflow-y: scroll;
}
 
.mxTxt {
 
width: 90%;
margin-left: 5%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border-bottom: 1rpx solid #F1F1F1;
 
view {
color: #333;
font-size: 28rpx;
width: 33%;
text-align: center;
}
}
 
.mxTitle {
margin-bottom: 14rpx;
width: 90%;
margin-top: 50rpx;
margin-left: 5%;
text-align: center;
border-bottom: 1rpx solid #d0d0d0;
 
view {
color: #dfb464;
font-weight: 600;
font-size: 32rpx;
padding-bottom: 16rpx;
 
width: 33%;
}
}
 
.bolang {
width: 100%;
height: 22rpx;
}
 
.mxBoomTip {
width: 100%;
border-radius: 40rpx 40rpx 0 0;
font-size: 50rpx;
letter-spacing: 6rpx;
font-weight: 600;
text-align: center;
background-color: $red;
height: 230rpx;
line-height: 230rpx;
color: #fff;
}
}
}

以上就是 直播軟體app開發，CSS超出隱藏並且能滾動，更多內容歡迎關注之後的文章