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

[tabs] 当前tab页面的内容滚动时,迅速切换下一个tab,导致内容概率性无法渲染,页面空白 #2441

Closed
tankle0 opened this issue Nov 16, 2023 · 12 comments · Fixed by #3055
Labels
bug Something isn't working IssueShoot middle middle level of difficulties

Comments

@tankle0
Copy link

tankle0 commented Nov 16, 2023

tdesign-miniprogram 版本

1.2.3

重现链接

No response

重现步骤

tab标签内,tab-panel 渲染列表,页面快速滚动时,迅速点击切换下一个tab,导致页面空白,无法渲染内容

期望结果

切换tab时,页面正常渲染

实际结果

页面快速滚动时切换tab,导致内容概率性无法渲染

28.mp4

基础库版本

2.23.4

补充说明

No response

IssueShoot

  • 预估时长: 3
  • 期望完成时间: 2023-11-30
  • 开发难度: 中
  • 参与人数: 1
  • 验收标准: 实现期望改造效果,提 PR 并通过验收无误
  • 备注: 最终激励以实际提交 pull request 并合并为准
Copy link
Contributor

👋 @tankle0,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@tankle0
Copy link
Author

tankle0 commented Nov 17, 2023

当页面处于滚动时,迅速点击切换tab,再点击返回之前的tab,不会返回到之前的滚动位置,而是直接到最底部了,麻烦尽快回复解决一下呐~(基础库3.2.0,tdesign 1.2.3,只要tab包裹循环的列表,都会出现这个问题)

@tankle0
Copy link
Author

tankle0 commented Nov 17, 2023

@anlyyao 烦请看一下我这个问题呗~

@anlyyao
Copy link
Collaborator

anlyyao commented Nov 20, 2023

当页面处于滚动时,迅速点击切换tab,再点击返回之前的tab,不会返回到之前的滚动位置,而是直接到最底部了,麻烦尽快回复解决一下呐~(基础库3.2.0,tdesign 1.2.3,只要tab包裹循环的列表,都会出现这个问题)

收到反馈,下个版本带上哈~

@anlyyao anlyyao added bug Something isn't working middle middle level of difficulties labels Nov 20, 2023
@hkaikai
Copy link
Contributor

hkaikai commented Jan 12, 2024

当页面处于滚动时,迅速点击切换tab,再点击返回之前的tab,不会返回到之前的滚动位置,而是直接到最底部了,麻烦尽快回复解决一下呐~(基础库3.2.0,tdesign 1.2.3,只要tab包裹循环的列表,都会出现这个问题)

@tankle0 能提供一下出问题的代码吗

@tankle0
Copy link
Author

tankle0 commented Jul 27, 2024

当页面处于滚动时,迅速点击切换tab,再点击返回之前的tab,不会返回到之前的滚动位置,而是直接到最底部了,麻烦尽快回复解决一下呐~(基础库3.2.0,tdesign 1.2.3,只要tab包裹循环的列表,都会出现这个问题)

@tankle0 能提供一下出问题的代码吗

就是tab包裹列表,异步请求后渲染,1.4.4没有出现渲染空白的问题,但是有时候还会出现无法滚动到之前的位置

30.mp4

@hkaikai
Copy link
Contributor

hkaikai commented Aug 7, 2024

当页面处于滚动时,迅速点击切换tab,再点击返回之前的tab,不会返回到之前的滚动位置,而是直接到最底部了,麻烦尽快回复解决一下呐~(基础库3.2.0,tdesign 1.2.3,只要tab包裹循环的列表,都会出现这个问题)

@tankle0 能提供一下出问题的代码吗

就是tab包裹列表,异步请求后渲染,1.4.4没有出现渲染空白的问题,但是有时候还会出现无法滚动到之前的位置

30.mp4

你是说无法保留tab的滚动位置吗?

@hkaikai
Copy link
Contributor

hkaikai commented Aug 7, 2024

@tankle0 #3055 的pr,你能试一下,看有没有解决你的问题

@tankle0
Copy link
Author

tankle0 commented Aug 17, 2024

@tankle0 #3055 的pr,你能试一下,看有没有解决你的问题

如果第二个tab里面的内容没有超出滚动的话,再次点击回到第一个tab,就直接回到顶部了,没有回到第一个tab切换之前的位置,你看下录屏

35.mp4

@hkaikai
Copy link
Contributor

hkaikai commented Aug 17, 2024

@tankle0 #3055 的pr,你能试一下,看有没有解决你的问题

如果第二个tab里面的内容没有超出滚动的话,再次点击回到第一个tab,就直接回到顶部了,没有回到第一个tab切换之前的位置,你看下录屏

35.mp4

这个和tabs没啥关系了,应该和你的list有关系,list的滚动位置应该是重新计算了,可以试一下以下方案:
1、tabs开启animation试一下,让panel提前渲染
2、自己缓存list的滚动位置,切回去时还原
3、换个list(可以用普通dom试一下滚动)

@tankle0
Copy link
Author

tankle0 commented Aug 20, 2024

@tankle0 #3055 的pr,你能试一下,看有没有解决你的问题

如果第二个tab里面的内容没有超出滚动的话,再次点击回到第一个tab,就直接回到顶部了,没有回到第一个tab切换之前的位置,你看下录屏
35.mp4

这个和tabs没啥关系了,应该和你的list有关系,list的滚动位置应该是重新计算了,可以试一下以下方案: 1、tabs开启animation试一下,让panel提前渲染 2、自己缓存list的滚动位置,切回去时还原 3、换个list(可以用普通dom试一下滚动)

开启animation出现了tab内容都挤在一个tab里面了,后面tabs空白,不知道是不是bug

38.mp4

@hkaikai
Copy link
Contributor

hkaikai commented Aug 20, 2024

@tankle0 #3055 的pr,你能试一下,看有没有解决你的问题

如果第二个tab里面的内容没有超出滚动的话,再次点击回到第一个tab,就直接回到顶部了,没有回到第一个tab切换之前的位置,你看下录屏
35.mp4

这个和tabs没啥关系了,应该和你的list有关系,list的滚动位置应该是重新计算了,可以试一下以下方案: 1、tabs开启animation试一下,让panel提前渲染 2、自己缓存list的滚动位置,切回去时还原 3、换个list(可以用普通dom试一下滚动)

开启animation出现了tab内容都挤在一个tab里面了,后面tabs空白,不知道是不是bug

38.mp4

panel的内容需要设置固定高度

// js
data: {
  tabPanelstyle: 'height: 200px',
  animation: { duration: 0.3 },
},
// wxml
<t-tabs
  animation="{{animation}}"
>
  <t-tab-panel label="选项一" value="0" style="{{tabPanelstyle}}">选项一内容</t-tab-panel>
</t-tabs>

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

Successfully merging a pull request may close this issue.

4 participants