2021-05-18

<hmtt>

1.首页文章列表项_样式调整# 要调整哪些内容

1. 文章标题 - 字号  颜色  多行文字省略

2.单图封面 - 封面容器( 去除 flex: 1 固定高度 左内边距) 封面图 (宽高 填充模式: cover)

3.底部文本信息  - 字号 颜色  间距 让标题和底部文本上下两端对齐

4.多图封面 - 外层容器 (flex容器 上下外距)  图片容器 (平均分配容器空间: flex: 1 ; 固定高度 容器项间距)

 

2.为什么好多图片资源返回403? 第三方平台一般是怎么处理图片资源保护的? 可以尝试怎么解决?

1.因为我们后端数据数用过爬虫抓取的第三方平台内容,而某些第三方平台对图片资源做了防盗链保护处理

2.第三方平台的服务一般会使用Referer请求识别访回来源,然后处理响应

  在元素上设置属性 referrerPolicy = "no-referrer"

  直接在页面中通过 <meta name="referrer" content="no-referrer" />

 

3.使用dayjs步骤

1.装包

2.在utils下封装一个模块,引入dayjs

3.导入中文语言包,并设置

 

4.在项目中如何使用dayjs的相对时间

1.引入相对时间的插件,并注册上去

2.定义一个全局过滤器

3.到页面中使用(过滤器语法: {{ 数据 |  过滤器名称 })

 

5.说出频道编辑的交互逻辑

1.点击汉堡按钮显示出层,点击弹出层左上角的叉号关闭弹出层

2.点击推荐频道列表中的标签添加到我的频道列表

3.点击我的频道列表右上角的编辑按钮,我的频道进入编辑状态,显示关闭图标,并且按钮文本切换为完成,再次点击完成按钮,切换至非编辑状态

4.点击我的频道中的标签

  非编辑状态下  -  切换至该频道

  编辑状态下 - 移除该频道至推荐频道列表

 

6.弹出层组件写在那?  如何控制弹层显示隐藏? 如何将弹层关闭按钮显示在左上角? 如何将弹层排满整个屏幕?

1.src/views/home/index.vue

2. v-model="isChannelEdlitShow"

  close-icon-position = "top-left"

   :style = "{ height: 100% }"

 

7.弹层的内容是直接写在弹层组件中的吗?

1.不是 ,单独封装一个组件ChannelEdit , 在插入到弹层组件中

 

8.编辑按钮需要自己写样式吗?  列表展示我们使用的什么组件?

1.不需要,直接用 VanButton 配置

2.使用VanGrid 可以轻松实现

 

9.推荐频道列表标签前面的加号图标是如何处理的？ 我的频道列表标签右上角的叉号图标是如何处理的？

 

1.先使用VanGridltem 自带的属性显示图标

  在调整水平显示及细节样式

2.先使用VanGridltem自带的属性显示图标

   在手动定位

 

10.展示步骤

1.从父组件传递子组件

  使用v-for遍历

 

11.激活思路

1.将首页中的激活标签索引传递给频道编辑组件

2.在频道编辑组件中遍历时判断,添加激活类名

 

12.我们有单独的接口获取推荐频道列表吗?  如何处理?

1.没有 只有获取所以频道列表的接口和我们频道列表的接口

2.所以频道列表  - 我的频道列表  =  推荐频道列表

 

13.知道推荐频道列表公式后,如何实现?

1.使用计算属性

 

14.推荐频道添加至我的频道列表数组后，还需要额外处理推荐频道列表吗？为什么？

1.不需要，因为推荐频道列表是通过计算属性算出来的，我的频道列表变了，推荐频道列表会自动重新计算

 

15.如何控制我的频道标签右上角的叉号图标显示隐藏与编辑按钮文本切换？ 我的频道列表中的推荐标签能删除吗？如何处理？

 

1.定义一个Boolean数据,叉号图标使用v-if或v-show绑定该数据,按钮文本使用三元表达式,之后操作数据即可

2.不能，定义一个数组存储这些固定的频道标签，在响应的位置做逻辑判断

 

16_频道编辑_切换频道   切换思路？

 

1. 监听我的频道列表中的频道标签点击事件

2. 判断当前是否为非编辑状态

3. 触发自定义事件，将索引作为事件数据，通知父组件更新激活频道的索引

4. 在父组件中监听ChannelEdit组件的自定义事件，将激活索引数据赋值为事件数据，并将弹层关闭

 

17 删除思路？    如果删除的索引在当前激活索引前，如何处理？  我们发现固定的频道也能被删除，如何处理？

 

 

1. 监听点击事件，并将索引传递进事件处理函数

   1. 判断当前是否为编辑状态

   2. 根据索引，通过调用数组的splice方法删除

2. 如果删除的索引在当前激活索引前，如何处理？

   需要将当前激活索引-1

3. 我们发现固定的频道也能被删除，如何处理？

   1. 删除前做逻辑判断，如果被删除的频道id在固定频道id列表中，则不执行删除操作