如果A页面，有子页面B的话，在A这个页面的每一个盒子都不能同时设置“border-radius”和“box-shadow”属性，否则，跳转到子页面B后，子页面B就会出闪烁且能在B页面能看到A页面的内容的问题
ITMister
- 发布：2020-11-30 10:04
- 更新：2020-11-30 11:11
- 阅读：681
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.9.8
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： Mate 30 5G
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
想在A页面的某个盒子上加上一个圆角和阴影
想在A页面的某个盒子上加上一个圆角和阴影
实际结果：
在A页面的圆角和阴影是正常的，但如果从A页面的加了阴影的盒子跳转到B页面，那么在B页面就可以看到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>
最佳回复
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