html 文件
<view class="half-screen-dialog-area">
<view
wx:if="{{isShow}}"
class="half-screen-dialog-mask {{isShowAnimate? 'show-mask':''}}"
catchtap="clickMask"
catchtouchmove="maskmove"
/>
<view catchtouchmove="maskmove" class="half-screen-dialog-main {{isShow? 'show-main':''}}">
<slot/>
</view>
</view>
js
Component({
// 组件的属性列表
properties: {
},
observers: {
isShow: function (isShow) {
wx.nextTick(() => {
this.setData({
isShowAnimate: isShow
})
})
}
},
// 组件的初始数据
data: {
isShow: false,
isShowAnimate: false
},
// 全局样式生效
options: {
addGlobalClass: true,
},
// 组件的生命周期
lifetimes: {
// 在组件实例刚刚被创建时执行
created() {
let defaultValue = this.data.show
this.setData({
isShow: defaultValue
})
},
// 在组件实例进入页面节点树时执行
attached() {
},
// 在组件在视图层布局完成后执行
ready() {},
// 在组件实例被从页面节点树移除时执行
detached() {}
},
// 组件的方法列表
methods: {
clickMask() {
this.setData({
isShow: false,
})
this.triggerEvent('close')
},
maskmove() {
return false;
},
hide(){
this.setData({
isShow: false,
})
},
show(){
this.setData({
isShow: true,
})
}
}
})
wxss
.half-screen-dialog-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 500;
visibility: visible;
transition: all 0.3s;
background: rgba(0, 0, 0, 0.6);
&.show-mask {
opacity: 1;
}
}
.half-screen-dialog-main {
&.show-main {
transform: translateY(0);
}
transform: translateY(100%);
transition: all 0.3s;
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-height: 75vh;
height:408Px;
z-index: 5000;
display: flex;
flex-direction: column;
line-height: 1.4;
background-color: #fff;
border-top-left-radius: 48px;
border-top-right-radius: 48px;
overflow: hidden;
padding: 0 0 env(safe-area-inset-bottom)
0;
}
json
{
"component": true,
"usingComponents": {}
}