ITMister
ITMister
  • 发布:2020-11-30 10:04
  • 更新:2020-11-30 11:11
  • 阅读:578

如果A页面,有子页面B的话,在A这个页面的每一个盒子都不能同时设置“border-radius”和“box-shadow”属性

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: Mate 30 5G

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

如果A页面,有子页面B的话,在A这个页面的每一个盒子都不能同时设置“border-radius”和“box-shadow”属性,否则,跳转到子页面B后,子页面B就会出闪烁且能在B页面能看到A页面的内容的问题

预期结果:

想在A页面的某个盒子上加上一个圆角和阴影

实际结果:

在A页面的圆角和阴影是正常的,但如果从A页面的加了阴影的盒子跳转到B页面,那么在B页面就可以看到A页面的内容。

bug描述:

如果A页面,有子页面B的话,在A这个页面的每一个盒子都不能同时设置“border-radius”和“box-shadow”属性,否则,跳转到子页面B后,子页面B就会出闪烁且能在B页面能看到A页面的内容的问题
A页面

<template>  
	<view class="content">  
		<image class="logo" src="/static/logo.png"></image>  
		<view class="text-area">  
			<text class="title" @click="tologin">{{title}}</text> <!-- 我的父级盒子不能同时设置 “border-radius”和“box-shadow”属性 -->  
		</view>  
	</view>  
</template>  
  
<script>  
	export default {  
		data() {  
			return {  
				title: '登录'  
			}  
		},  
		onLoad() {  
  
		},  
		methods: {  
			tologin(){  
				uni.navigateTo({  
					url:'../login/login'  
				})  
			}  
		}  
	}  
</script>  
  
<style>  
	.content {  
		display: flex;  
		flex-direction: column;  
		align-items: center;  
		justify-content: center;  
		  
		border-radius: 10rpx;  
		box-shadow: 0 1px 2px #f3f3f3;  
	}  
  
	.logo {  
		height: 200rpx;  
		width: 200rpx;  
		margin-top: 200rpx;  
		margin-left: auto;  
		margin-right: auto;  
		margin-bottom: 50rpx;  
		  
		/* border-radius: 10rpx;  
		box-shadow: 0 1px 2px #f3f3f3; */  
	}  
  
	.text-area {  
		justify-content: center;  
		align-items: center;  
		background-color: #2C405A;  
		width: 500rpx;  
		height: 200rpx;  
		  
		/* border-radius: 10rpx;  
		box-shadow: 0 1px 2px #f3f3f3; */  
	}  
  
	.title {  
		font-size: 36rpx;  
		color: #8f8f94;  
	}  
</style>  

B页面

<template>  
	<view class="login">  
		<text>我是登录页</text>  
	</view>  
</template>  
  
<script>  
	export default {  
		data() {  
			return {  
				  
			};  
		}  
	}  
</script>  
  
<style lang="scss">  
	.login{  
		height: 300rpx;  
		justify-content: center;  
		align-items: center;  
	}  
</style>  

2020-11-30 10:04 负责人:DCloud_Android_ST 分享
已邀请:

最佳回复

DCloud_uniCloud_JSON

DCloud_uniCloud_JSON

Android平台weex对阴影样式(box-shadow)支持不完善,如设置圆角边框时阴影样式显示不正常、设置动画时在Android7上显示不正常、在Android10上出现闪烁现象等。

为解决这些问题,从HBuilderX 2.4.7起,新增elevation属性(组件的属性,不是css样式)设置组件的层级,Number类型,层级值越大阴影越明显,阴影效果也与组件位置有关,越靠近页面底部阴影效果越明显

详情:点此打开链接

  • 999

    可以看看这两个问题吗?

    https://ask.dcloud.net.cn/question/112177

    https://ask.dcloud.net.cn/question/112175


    2020-11-30 11:12

该问题目前已经被锁定, 无法添加新回复