15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 uinapp

使用 uni-popup 弹出层时出现的莫名其妙的css样式

李家霖| 发布于 2021-08-07 22:13:56| 686阅读| 0点赞| 0评论
举报

uni-popup 组件在渲染到界面时会有一些辅助弹窗显示的标签渲染到界面上 这些标签中的css如果跟界面中的冲突会有问题




代码:

        <uni-popup ref="pop" type="bottom">
			<view class="popup">
				
			</view>
		</uni-popup>        .popup{height: 400rpx;background-color: #fff;border-radius: 20rpx 20rpx 0rpx 0rpx;width: 750rpx;padding: 0rpx;}
	<br/>

css样式中并没有设置一些特殊的样式  但是显示到界面上左侧有空隙      通过开发者工具来检查 发现左侧的空隙是来自某一个标签的padding属性  且这个标签中还包含着uni-popup中的 view标签  

产生奇怪的样式的原因是因为uni-popup组件为了实现弹出层效果  不仅需要手动的在uni-popup中填入弹出层的内容  还需要其他的标签来辅助实现效果  比如弹出层的半透明黑色遮罩层就是用其他标签来设置的。

但这些弹出层需要的辅助标签并不需要使用者手动设置或添加    在渲染到界面的时候uni-popup会自动的添加到界面中  出现以上图片中的现象就是自动添加的辅助标签出现了问题    辅助标签会有一些class类名用来设置样式    而如果这时的界面中恰好有标签的类名与辅助标签的类名相同   就会出现当前的界面中的类名设置的样式覆盖了辅助标签原来的样式     图片中的现象就是这个原因造成的   解决方法就是将界面中与辅助标签相同的类名修改 就不会发生覆盖。



0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

李家霖
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部