收藏
回答

scroll-view 在页面弹窗关闭之后会自动滚到自顶部,而不是停留在当前滚动位置

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 微信iOS客户端 v8.0.33 2.29.0

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;
  }


回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--阳光
    社区技术运营专员--阳光
    2023-03-24

    用原生的试试,还有问题构造个代码片段我门看下(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2023-03-24
    有用
    回复
登录 后发表内容