1.首页顶部导航及tab导航实现

1.1顶部导航van-nav-bar

fixed进行定位，固定位置 注意此时右侧图标适配的问题：postcss只能翻译style里面的css样式代码，标签内行内样式它无法转换为px，所以需要手动计算。 此时的size应为原先的18px/37.5=0.48rem

1.2tab导航

1.2.1频道导航铺设Tab标签页

给van-nav-bar设置fixed时，tab导航会上去，需要手动设置下来-调整时尽量修改组件的样式也可以选择个盒子进行包裹

设置padding给挤下来---统一思路

1.2.2 sticky 定位-固定tab栏标签页

基于用户的滚动位置来定位，当滚动超出目标区域，变成固定定位，之前是相对定位

1.3tab导航栏数据操作

1.3.1数据获取

接口文档：获取用户频道

获取用户频道完整写法：注意请求体里面有空格-直接复制

1.3.2数据铺设

接口方法写好后，调用该接口,取出数据放到数组里面，遍历数组

遍历数组：

2.文章列表页的实现

文章以组件化的形式传进去

2.1文章列表数据获取

接口方法：

2.2文章列表铺设

组件间数据的传输

3.文章Item处理

3.1图片标签位置

界面中图片设计单图和多图的，页面设计三步走：1.分析标签 2.调整样式 3.数据处理

1.分析标签---确定标签的位置

2.调整样式---object-fit: cover; /* 对图片进行剪裁，保留原比例 */

3.数据处理---单图和多图只能显示一个 v-for判断

3.2时间处理--过滤器dayjs

utils定义一个工具类date.js

使用该方法：