scrollView下拉刷新动画错位

[undeadfrost]

相关平台

微信小程序

小程序基础库: 2.22.1
使用框架: React

复现步骤

点击隐藏显示，下拉刷新后在点击隐藏显示

``import { View, Button, ScrollView, Image } from '@tarojs/components'
import { useState } from 'react'

export default function Test() {
const [show, setShow] = useState(false)

return (

<ScrollView
style={{ width: '100%', height: 400, display: !show ? 'block' : ' none' }}
scrollY
refresherEnabled
refresherBackground='green'
>
22222
22222
22222
22222

{
show && (
<ScrollView style={{ width: '100%', height: 400 }} scrollY refresherEnabled>
11111
11111
11111
11111

)
}
<Button onClick={() => setShow(!show)}>{show ? '隐藏' : '显示'}

)
}
``

期望结果

在切换显示与隐藏中下拉刷新动画可以正常显示

实际结果

切换显示隐藏后，动画位置偏移

环境信息

👽 Taro v3.3.16


  Taro CLI 3.3.16 environment info:
    System:
      OS: macOS 11.6.2
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
      Yarn: 1.22.17 - ~/.nvm/versions/node/v12.16.2/bin/yarn
      npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
    npmPackages:
      @tarojs/components: 3.3.16 => 3.3.16 
      @tarojs/mini-runner: 3.3.16 => 3.3.16 
      @tarojs/react: 3.3.16 => 3.3.16 
      @tarojs/runtime: 3.3.16 => 3.3.16 
      @tarojs/taro: 3.3.16 => 3.3.16 
      @tarojs/webpack-runner: 3.3.16 => 3.3.16 
      babel-preset-taro: 3.3.16 => 3.3.16 
      eslint-config-taro: 3.3.16 => 3.3.16 
      react: ^17.0.0 => 17.0.2 

[github-actions]

等待热心的小伙伴解决问题中..., 有一些相关的 issues 可能帮助到你!

• taro init rn 新项目安卓启动红屏报错
• 支持支付宝lottie动画
• 新建小程序插件 打包出错 not contain an export named 'createNativeComponentConfig'

Thank you so much!

[Chen-jj]

感觉和微信小程序的模板 diff 有关，暂时可以通过增加一层 View 来解决：

export default function Test() {
  const [show, setShow] = useState(false)

  return (
    <View>
      <View>
      <ScrollView
        style={{ width: '100%', height: 400, display: !show ? 'block' : ' none' }}
        scrollY
        refresherEnabled
        refresherBackground='green'
      >
        <View>22222</View>
        <View>22222</View>
        <View>22222</View>
        <View>22222</View>
      </ScrollView>
      </View>
      <View>
      {
        show && (
          <ScrollView style={{ width: '100%', height: 400 }} scrollY refresherEnabled>
            <View>11111</View>
            <View>11111</View>
            <View>11111</View>
            <View>11111</View>
          </ScrollView>
        )
      }
      </View>
      <Button onClick={() => setShow(!show)}>{show ? '隐藏' : '显示'}</Button>
    </View>
  )
}

为什么增加 View 可以解决

后续会把数组形式的 childNodes 改为对象形式，应该可以解决这个问题。

[undeadfrost]

感觉和微信小程序的模板不同，暂时可以通过增加View来解决：

导出 默认 函数 Test ( )  { 
  const  [ show ,  setShow ]  =  useState ( false ) 

  return  ( 
    < View > 
      < View > 
      < ScrollViewstyle 
        = { { width : '100%' , height : 400 , display : ! show ? ' block ' : '无' } } scrollY    
        
        refresherEnabled 
        refresherBackground = 'green' 
      > 
        <查看> 22222 < /查看> 
        <查看> 22222 < /查看> 
        <查看> 22222 < /查看> 
        <查看> 22222 < /查看> 
      < / ScrollView > 
      < /查看> 
      <查看> 
      {
        显示 && ( 
          <ScrollView  style = { {  width : '100%' ,  height : 400  } }  scrollY refresherEnabled  > < 
            View > 11111 < / View > < 
            View > 11111 < / View > < 
            View > 11111 < / View > < 
            View > 11111 < / View视图> 
          < / ScrollView > 
        )
      } 
      < / View > 
      < Button  onClick = { ( )  =>  setShow ( ! show ) } > { show ? '隐藏' : '显示' } < / Button > 
    < / View > 
  ) 
}

增加视图 可以解决

解决方法将这个形式的 childNodes 改为对象形式，应该可以解决问题。

这样确实可以了，感谢！<Block>这个标签也是同样效果吗？我试了下是可以