2021-05-16

<hmtt>

1.头部导航栏实现步骤?  VanNavBar组件如何插入一个按钮?

1.使用VanNavBar组件 

  在VanNavBar组件中插入按钮 - 文本/图标

  样式调整 - 宽高/背景色/边框/文本大小/图标大小

2.使用插槽 (#title)

 

2.VanTabs组件如何控制当前激活的标签? 如何开启转场动画以及滑动切换?

1.v-model = "active" , active为索引值 

2.给VanTabs组件添加animated和swipeable属性

 

3./deep/的作用

1.样式深度操作符 (在一个scoped作用域样式中默认只能影响子组件的根元素,如果需要影响子组件内部的元素就需要加上/deep/)

 

4.汉堡按钮是如何插入的? 为何汉堡按钮的占位元素设置了宽度却无效? 如何解决?

1.通过VanTabs组件的#nav-right具名插槽,然后固定定位

2.因为flex父容器已经给其他flex子项均分设置了flex-basis所以无法撑开

   添加flex-shrink: 0 即可解决 -> 扩展阅读: https://blog.youkuaiyun.com/m0_37058714/article/details/80765562

 

5.展示频道列表的思路

1.找数据接口

2.封装请求方法

3.调用请求方法获取数据

4.模板绑定展示

 

6.为了达到不同频道的列表加载过后缓存的效果,我们要如何处理?

1.封装一个文章列表组件

2.然后在频道列表中把文章列表遍历出来,每个频道都对应一个文章列表(组件复用,各实例数据互不影响)

 

7.VanList有哪些核心的属性和事件

1.v-model = "loading" - 加载中状态控制

2.@load = "load" - 触发时的加载事件

3. :finshed = "finished" - 是否已全部加载完

4. finishe - text = "没有更多了" - 全部加载完时底部的提示文本

 

8.加载文章列表数据的思路? timestamp参数的作用? 

1.找接口

  封装请求方法

  调用请求方法获取数据

  模板绑定显示

2.防止加载重复的数据 (从我第一次加载页面事件点为临界点, 把新发布的文章排出后在分页)

 

9.拿到文章数据列表数据后是如何处理的? 为什么一屏数据没加载完,不会自动加载下一页数据?  为什么上拉加载更多时, 一直在重复加载第一页的数据? 如何判断没有更多了?

1.追加数组中, 不要直接赋值,否则已加载的列表数据会丢失

2.因为你没有将this.loading重置为false

3.因为你的请求参数 ( timestamp ) 一直是当前时间戳,需要设置为上一页数据的时间戳 ( pre_timestamp )

4.如果响应数据的长度为0 ,则说明没有更多了 

 

10.请求失败相关的两个属性叫什么? .sync 修饰符的作用?

1. error ( 是否有错误  )     error-text ( 错误消息文本 )

2. 子传父通信的简写形式，<Child :error.sync="error" />，等价于：

1. 父组件使用子组件时：<Child :error="error" @update:error="error = $event" />

2. 子组件：

   1. 定义属性，接收父组件传过来的值：props: { error: Boolean }

   2. 在合适的时机，触发自定义事件，通知父组件修改属性值：this.$emit('update:error', true|false)

      注意：子组件若想要支持父组件在绑定某个属性时使用.sync修饰符，则子组件在触发自定义事件时的事件名格式必须遵守：update:属性名

  

11. <1>下拉刷新是VanList组件自带的功能吗? 怎么实现的? 有什么核心属性和事件? 

       <2>下拉刷新请求获取数据后,你认为应该追加到数组前面还是直接替换数组?

1. 不是   

    是一个独立的组件VanPullRefresh,将需要下拉刷新效果的内容包裹在该组件里面即可(其实就是该组件的默认插槽)

    v-model = "loading" (是否刷新)

    @refresh = "onRefresh" (刷新事件)

2. 实际上大多数场景都是直接替换数组,重置列表数据

 

12.<1>如何让头部的导航栏VanNavBar和频道列表VanTabs向下滚动是固定? 

     <2>VanTabs固定定位后,如何让宽度保持和父元素一样?

     <3>VanNavBar和VanTabs固定定位后,文章列表内戳上去了,如何解决?

1.VanNavBar - 添加fixed属性

   VanTabs - 手动添加样式

2.left: 0 ; right: 0;

3.给父元素设置padding - top

 

13.如何让每一个列表记住自己的滚动位置?  vw和vh是什么单位? 

1. height : calc  ( 100vh - 顶部px - 底部px ); - 这样设置更合理

     overflow-y: auto

2. CSS3 中新增的一种单位  vw( 视口宽度 )   vh( 视口高度 )

 

 14项目中有很多地方都用到文章列表项,但有些区别,如何处理? 

1.封装成组件,找到不同点,在组件内部消化处理,兼容所以情况

 

15.有的文章只有一张图片,有的有三张,如何处理?

1.根据文章数据 artile.cover.type 来结合 v-if 控制显示