新手,请大神们赐教,谢谢
自定义modal弹窗组件,引用后样式错乱,怎么解决?谢谢<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文件中调用子自定义组件的方法,引用后样式全乱
2022-05-25