文章列表展示

• 画页面
• 铺设数据

页面样式

文章频道样式

使用 Tab 标签，和头部导航栏

• 标签项
  • 右边框
  • 下边框
  • 宽高
  • 文字大小
  • 文字颜色
• 右侧汉堡按钮
• 底部条
  • 宽高
  • 颜色
  • 位置

要点总结

• 频道 定位、内容居中、宽高、背景色、透明度、字体图标大小
• 伪元素设置渐变边框

铺设数据

文章列表样式

画页面

创建文章列表组件，便于复用

article-list

props:{
	channel:{
		type:Object,
		required:true
	}
}

拿到频道参数，网络请求到 data{channels} 数组

将数组的元素做路由参数

使用 List 列表组件

使用list列表组件，根据官方示例，修改自己代码

data(){
	list:"",
	loading:false,
	finished : false
}

数据部分

loading 为false会继续触发 load 事件

铺设数据前写好文章列表组件

铺设数据

封装请求方法-获取频道的文章链表

时间戳（请求数据的页面在这里理解为） 更具时间戳 获取不同页的数据

请求第一页数据是当前最新的时间戳

用于请求之后数据的时间戳会在当前请求结果中返回

将拿到的文章列表数据 ，加入到 list 数组之中

有两个页面展示

• 上滑load 加载
• 下拉刷新 ， 轻提示

导航栏固定定位 ，给文章列表一个边距