学习Vue之旅：Day9——网易云（首页）

目录

① 如何变成这种上下排版？ 

② 为什么改变font-size，无效？

 ③ 如何在Vue3中引入swiper？？?为什么引入了还报错？？？

 ④ 像网易云那种 每日歌单推荐，可以滑动的card，应该怎么做？在Vue中如何引入这个Swiper？ 

 ⑤ 为什么从后端获取数据之后，图片展示在Swiper上，Swiper的每个slide 变宽了？中间的缝隙也消失了？

⑥ slidesPerView 和 spaceBetween  的用途：

⑦ 图标颜色，设置了color:#eee; 结果还是原来的颜色？

⑧ 播放量怎么变成网易云那种：xxx万，xxx亿

---

① 如何变成这种上下排版？ 

 

设为flex，然后 把主轴设为竖直方向

设置align-item，即可得到文字与图标居中的效果

---

② 为什么改变font-size，无效？

有些页面可能设置了最小字体，不能直接设置字号，比如chrome的最小字号是12px，如果需要更小就需要使用放缩属性

---

 ③ 如何在Vue3中引入swiper？？?为什么引入了还报错？？？

小卡片左右滑动的实现 – 前端开发，JQUERY特效，全栈开发，vue开发

VUE3.X使用最新版swiper小结_lynnpaul的博客-CSDN博客

vue中swiper vue-awesome-swiper的使用方法和爬坑大法_zyf_baby的博客-CSDN博客

先确定你要用的Swiper版本……如果版本安装错了，会报出好多问题

我就是Vue3+swiper4来开发。

 不确定自己的swiper版本，可以在 node_modules里的swiper文件夹  里面的package.json文件里查看

用了好多 swiper代码，都有问题，最后，找到一个代码ok的

在vue中使用swiper4.x - 风zz - 博客园

就是上述链接，仔细阅读，别漏加东西了

其次，它里面轮播的img记得删掉，因为你没有轮播资源，会报错

最终效果，原本轮播的图很宽，我改小了：通过 width: 3rem !important; 一定要加上 ！important 

.swiper-slide{
  width: 3rem !important;
  height: 3rem;
  background: red;
  border: 1px solid red;
}