Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

热门标签页切换动画卡顿 #22

Closed
mwindson opened this issue Dec 25, 2018 · 3 comments
Closed

热门标签页切换动画卡顿 #22

mwindson opened this issue Dec 25, 2018 · 3 comments
Assignees
Labels
bug Something isn't working

Comments

@mwindson
Copy link

在热门选项卡中,点击不同的标签时,Tab栏的切换动画会有卡顿现象。

原因可能是请求数据返回的时间少于切换动画的默认时间(300ms),导致组件的重新渲染影响了动画的显示。

尝试加入了300ms的延时,或许可以解决问题

// useFetcher.ts
// 对useFetcher的改动影响较大,可以作为参数 
    const delayPromise = new Promise((resolve, reject) => {
      try {
        setTimeout(() => resolve('time end'), 300)
      } catch (e) {
        reject(e)
      }
    })
    Promise.all([service(), delayPromise]).then(([res, end]) => {
      res
        .fail(err => {
          options.fail && options.fail(err)
        })
        .succeed(data => {
          options.success && options.success(data)
          setState(data)
        })
    })
@Deturium
Copy link
Collaborator

Deturium commented Dec 25, 2018

切换动画指的是 Loading 的动画吗
在网络状况非常好的情况下,loading 动画刚刚开始就会被新页面的载入打断,看起来就会有闪烁

或者说指 Tab 动画
如果页面很快就切换了,Tab 的动画也会显得略有延迟

@mwindson
Copy link
Author

大概这样,有时候没问题
2

@AsukaSong AsukaSong added 性能 bug Something isn't working and removed 性能 labels Dec 25, 2018
AsukaSong added a commit that referenced this issue Dec 25, 2018
* 加载热门列表时延时300ms
* 添加了一个useDelay
@AsukaSong
Copy link
Collaborator

AsukaSong commented Dec 25, 2018

f701150
渲染时添加了300ms延时

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants