• 全部
  • .NET Framework
  • ASP
  • Web Services
  • .NET互联网桌面应用
  • VB
  • 图表区
  • 分析与设计
  • 组件/控件开发
  • AppLauncher
  • 问答

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

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

5.8w+

社区成员

.NET技术交流专区
申请成为版主
帖子事件
创建了帖子
2021-04-27 02:26
社区公告
暂无公告