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

web: just reload home path after create post success #176

Merged
merged 1 commit into from
Jul 30, 2022

Conversation

alimy
Copy link
Collaborator

@alimy alimy commented Jul 30, 2022

  • web: just reload home path after create post success

pr概述:
在泡泡广场页面 成功创建推文后,页面跳转到泡泡详情页面,然后从泡泡详情页面返回到广场页面(点按页面中的返回上一级按钮或直接浏览器的返回按钮),文章列表并没有自动刷新到最新状态,需要额外的刷新操作才能更新文章列表。 用户应该期望的是返回到广场页面后文章列表能自动刷新到最新状态; 这里有两种改法:

  1. 从泡泡详情页面返回到泡泡广场页面后自动刷新文章列表到最新状态;
  2. 创建推文后,直接重新加载文章列表到最新状态,不自动跳转到泡泡详情页面;

pr特性:
如上所述,这个pr采用第二种方案解决上述问题。

  • 不太清楚设计之初为什么要在创建推文成功后跳转到泡泡详情页面,但是从我个人使用体验,每次创建推文后,第一件事是顺手返回到泡泡广场页面,因为刚创建的推文泡泡详情页面除了推文内容,啥也没有(点赞/收藏/评论)并不想在这个页面多待,所以在想是不是成功创建推文后留在泡泡广场页面会更好一点呢,这个pr基于这一点优化上述问题。

  • 如果设计需要在创建推文成功后跳转到泡泡详情页,这个pr就不要合并了,可以采用上述第一种方案另外提一个PR优化用户体验。

@alimy alimy requested a review from rocboss July 30, 2022 04:41
@alimy
Copy link
Collaborator Author

alimy commented Jul 30, 2022

不自动刷新的原因是Home.vue中:

watch(
    () => ({
        path: route.path,
        query: route.query,
        refresh: store.state.refresh,
    }),
    (to, from) => {
        if (to.refresh !== from.refresh) {
            page.value = +(route.query.p as string) || 1;
            setTimeout(() => {
                loadPosts();
            }, 0);
            return;
        }
        /// 这里拦截了从泡泡详情页面回到广场页面重新加载刷新文章列表的操作
        if (from.path !== '/post' && to.path === '/') {
            page.value = +(route.query.p as string) || 1;

            setTimeout(() => {
                loadPosts();
            }, 0);
        }
    }
);

Copy link
Owner

@rocboss rocboss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

嗯,这样确实更合理些,就按这个交互来吧

@rocboss rocboss merged commit a17ada6 into rocboss:main Jul 30, 2022
alimy added a commit to alimy/paopao-ce that referenced this pull request Jul 30, 2022
alimy added a commit that referenced this pull request Jul 30, 2022
optimize #176 change reload page logic just for simple
@alimy
Copy link
Collaborator Author

alimy commented Jul 30, 2022

这里优化后 采用了第三种方案:(具体实现参见: #179 #177 )

  1. 泡泡广场页面如果是在第一页,直接将服务器端返回的post就地添加到文章列表的最前面,并且需要保证置顶的post还是在最前面;具体实现参见 optimize #176 change reload page logic just for simple #177;这样处理是避免直接重新从服务器端拉取第一页文章列表可能会把新添加的推文刷掉,在第一页可能就看不到新添加的推文了,造成视觉混乱(成功创建了推文但没见到去哪了)。在用户很多发的泡泡频率很高时,是会出现这种情况,所以采用就地插入新添加的推文到第一页,并保证置顶的推文还是显示在最前面,很好的避免新推文被刷掉的可能,最不济也会显示在第一页最后一条;
  2. 泡泡广场页面如果不在第一页,就跳转到泡泡详情页面;具体实现参见web: go to post detail page if main page not at first when create post success #179; 这样处理主要是避免直接插入文章列表但又不是正确的第一页位置造成的混乱。在这种场景下,成功创建推文后跳转到详情页面,返回后不自动刷新文章列表是合理的,因为不在第一页,没必要去刷新,文章毕竟添加在最新的第一页;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants