uniapp遮罩层隐藏tabbar
文章描述：
uniapp隐藏tabbar功能、禁止下面页面滑动、弹出层内容滑动
template
<template>
<view class="container" :style="showMsk ? 'height: 100vh;overflow: hidden;' : ''">
<!-- <view >点击显示底部弹框</view> -->
<view class="" v-for="(item,index) in 100" :key="index" @tap="clickme">
{{item}}
</view>
<!-- 变暗的背景 -->
<view class="mask" @tap="hideModal" v-if="showModalStatus"></view>
<!-- 底部弹出框 -->
<view class="bottom_box" :class="showModalStatus?'active':''" >
<!-- 滚动列表 -->
<scroll-view scroll-y="true" style="height: 600upx;">
<view v-for="(item,index) in 104" :key="index">{{item}}</view>
</scroll-view>
</view>
</view>
</template>
script
export default {
data() {
return {
showMsk:false,
showModalStatus: false
}
},
onLoad: function(options) {},
methods: {
//点击显示底部弹出框
clickme: function() {
this.showModal();
},
//显示对话框
showModal: function() {
// 显示遮罩层
this.showModalStatus = true
this.showMsk = true
//隐藏底部栏
uni.hideTabBar()
},
//隐藏对话框
hideModal: function() {
// 隐藏遮罩层
this.showModalStatus = false
this.showMsk = false
setTimeout(()=>{
// 显示底部栏
uni.showTabBar();
},500)
},
//...
}
}
style
/*遮罩层 */
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity:.2;
overflow: hidden;
z-index: 1000;
color: #fff;
}
/*底部框 */
.bottom_box {
height: 0;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
transition: all 0.5s;
}
.bottom_box.active {
opacity: 1;
transition: all 0.5s;
height: 400rpx;
}
.container{
padding-top: 100upx;
box-sizing: border-box;
}
发布时间：2023/01/15
发表评论