知乎首页界面 推荐关注热榜切换

小枝_3 2021-04-27 02:26:20
最近在写一个Asp.Net mvc论坛的毕业设计,想实现首页内容的动态刷新,考虑到上面导航栏实现效果是通过a标签实现每一个选项一个页面,但是观察到知乎首页的热搜、关注、推荐 三个板块的切换并没有 页面的重新加载,但是路径进行了切换,想问一下这种效果如何实现,或者有什么好的思路
...全文
966 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
ziqi0716 2021-04-28
  • 打赏
  • 举报
回复
其实前端项目有很多现成的方案,建议前后端分离下先。 前端可以分成多个组件,整体框架一个TabTable,Header内容来区分大类。 每个TabItem内容都是一个List,List的Item样式再定义一下,如标题,内容简介,缩略图等部分。 数据获取及刷新可以使用ajax或者二次封装的库来实现(axios等),获取到数据刷新组件内容,通常使用mvvm框架的绑定机制,数据刷新,UI自动刷新。 这个思路可以用vue,angular等来实现,还可以借助下Element-UI等库。
晨易夕 2021-04-28
  • 打赏
  • 举报
回复
你也可以试一下单页应用啊,都是一个页面,路径变了是框架的路由管理起作用。
hztltgg 2021-04-28
  • 打赏
  • 举报
回复
是有点奇怪,一般的前端框架,用a链接的#来区分加载的内容,#是对自己页面的链接,不会刷新页面。 这个直接用网址来做,一般是前端框架对href内容进行拦截处理的,具体不知道他们用什么框架。
极客诗人 2021-04-28
  • 打赏
  • 举报
回复
1.js异步加载 2.弄成多个区域,全部加载后,控制显示区域和内容
楠小南 2021-04-28
  • 打赏
  • 举报
回复
单页面程序,你可以参考一下 ASP.NET Core Blazor 框架,他就是一个单页面
  • 打赏
  • 举报
回复

<nav class="TopstoryTabs Topstory-tabs"><a aria-controls="Topstory-recommend" class="TopstoryTabs-link Topstory-tabsLink" data-za-detail-view-id="9122" data-za-extra="{"button":{"text":"推荐"}}" href="/">推荐</a><a aria-controls="Topstory-follow" class="TopstoryTabs-link Topstory-tabsLink" data-za-detail-view-id="9122" data-za-extra="{"button":{"text":"关注"}}" href="/follow">关注</a><a aria-controls="Topstory-hot" class="TopstoryTabs-link Topstory-tabsLink is-active" data-za-detail-view-id="9122" data-za-extra="{"button":{"text":"热榜"}}" href="/hot">热榜</a></nav>
是挺奇怪,是通过a标签的href切换的, 页面url也变更了,但只有中间容器内容变更了,其他模块都没有刷新
小枝_3 2021-04-27
  • 打赏
  • 举报
回复
引用 3 楼 三楼一郎 的回复:
[quote=引用 2 楼 小枝_3 的回复:]局部刷新吗?
最简单的直接把三块内容一起载进来,通过CSS控制显示谁不显示谁就ok了[/quote] 但是这个知乎的三个切换,页面没有刷新,但是路径发生了改变,内容也发生了改变,想了解一下大概思路
三楼の郎 2021-04-27
  • 打赏
  • 举报
回复
引用 2 楼 小枝_3 的回复:
局部刷新吗?
最简单的直接把三块内容一起载进来,通过CSS控制显示谁不显示谁就ok了
小枝_3 2021-04-27
  • 打赏
  • 举报
回复
局部刷新吗?
  • 打赏
  • 举报
回复
ajax了解一下

62,244

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧