收藏
回答

自定义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文件中调用子自定义组件的方法,引用后样式全乱
回答关注问题邀请回答
收藏

3 个回答

登录 后发表内容