scroll-view 在页面弹窗关闭之后会自动滚到自顶部,而不是停留在当前滚动位置;在开发者工具,安卓及IOS都可以复现;期望效果是可以停留在当前用户滚动的位置,而不是自动往上滚动。
// ScrollView组件测试
const scrollViewDemo = () => {
return (
<ScrollView
className='page_scrollView'
scrollY
scrollWithAnimation
>
<View className='text_box'>
text_box_1
</View>
<View className='text_box'>
text_box_2
</View>
<View className='text_box'>
text_box_3
</View>
<View className='text_box'>
text_box_4
</View>
</ScrollView>
)
}
const dialogDemo = () => {
const handleCloseCopyDialog = () => {
setIsShowCopyDialog(false)
}
return (
<View className='test_custom_mask'>
<View className='dialog'>
<View className='test_custom_dialog_close' onClick={handleCloseCopyDialog}></View>
<View className='copy_text_container'>
1111
</View>
</View>
</View>
)
}
return (
<View className='test_page'>
{/* { helloWorld() } */}
{ scrollViewDemo() }
<View className='g_button' onClick={() => setIsShowCopyDialog(true)}>添加客户</View>
{
isShowCopyDialog && dialogDemo()
}
</View>
)
.test_custom_mask {
position: fixed;
top: 0;
left: 0;
width: 750rpx;
height: 100%;
background: rgba(0,0,0,0.5);
// background: rgba(141, 138, 138, 0.3);
backdrop-filter: blur(13rpx);//毛玻璃属性
z-index: 100;
}
.test_custom_dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-size: cover;
background-repeat: no-repeat;
}
.test_custom_dialog_close {
position: absolute;
top: 50rpx;
right: 45rpx;
width: 32rpx;
height: 32rpx;
background-size: cover;
background-repeat: no-repeat
}
.dialog {
width: 615rpx;
height: 1026rpx;
background: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 29rpx;
padding: 40rpx 60rpx;
box-sizing: border-box;
}
用原生的试试,还有问题构造个代码片段我门看下(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
我也遇到了这个问题