<view class='mask' wx:if='{{show}}' bindtap='clickMask'>
<view class='modal-content' style='height:{{height}}'>
<scroll-view scroll-y class='main-content'>
<slot></slot>
</scroll-view>
<view class='modal-btn-wrapper'>
<view class='cancel-btn' bindtap='cancel'>取消</view>
<view class='confirm-btn' bindtap='confirm'>确定</view>
</view>
</view>
</view>
上面是自定义组件的wxml文件代码
.mask{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.4);
z-index: 9999;
}
.modal-content{
display: flex;
flex-direction: column;
width: 80%;
background-color: #fff;
border-radius: 10rpx;
text-align: center;
}
.modal-btn-wrapper{
width: 98%;
display: flex;
flex-direction: row;
height: 100rpx;
line-height: 100rpx;
border-top: 2rpx solid rgba(7,17,27,0.1);
margin-top: 300rpx;
}
.cancel-btn, .confirm-btn{
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
}
.cancel-btn{
border-right: 2rpx solid rgba(7,17,27,0.1);
}
.main-content{
flex: 1;
height: 100%;
overflow-y: hidden;
}
上面是wxss代码
{
"component": true,
"usingComponents": {},
"styleIsolation": "shared"
}
上面是json代码,其中"styleIsolation": "shared"三个值得试过,没变化
不在功能页面的json引入可以在功能页面正常调用展示,但不能在功能页面js文件中调用子自定义组件的方法,引用后样式全乱
下边没细看
但是.mask根元素使用absolute绝对定位肯定会出问题
应该是你样式冲突了,直接复制你发出来得代码,展示是对的
新手,请大神们赐教,谢谢