项目练习-头条新闻Day04-首页页面实现&文章列表切换、文章切换化-重点

146 阅读1分钟

1.文章列表切换

1.1实现文章列表的切换功能

tab标签页,通过名称进行匹配

image.png 按照名称进行匹配后,此时页面还是无法完成切换效果,因为数据没有更新

image.png 绑定事件change后

image.png 因为生命周期函数执行了一次,因此刷新需要在创建时,调用函数

image.png

1.2文章切换不断刷新的优化

此时项目点击切换时,各个内容在不断的更新。van-tab循环了很多标签导航,与之一一对应的内容列表不是上来都创建的,默认创建当前激活当行对应列表组件。第一次切换到对应的频道时,才会创建下属的Article List组件(creaded方法),第二次切换就是显示/隐藏切换 解决方案:外面现在使用的是同一个数组切换数据,多个aerticlelist使用的是同一个数组,切换会影响别人,文章列表数据,请求,数组,分别放到articlelist内部(自己请求自己的数据),外面只负责传入当前激活的ID

  • 详细看视频