尚硅谷-尚品汇笔记

Author: gavin
视频地址

P35 swiper基本使用

快速生成轮播图

步骤

1. 执行npm i -S swiper@5,添加 swiper 库，因为 6 可能有 bug,所以用 5，

2. 引包（css）,在main.js中引入import "swiper/css/swiper.min.css"

3. 书写 template 中 DOM 结构

   <div class="swiper-container" ref="cur">
     <div class="swiper-wrapper">
       <div class="swiper-slide" v-for="carousel in list" :key="carousel.id">
         <img :src="carousel.imgUrl" />
       </div>
     </div>
     <!-- 如果需要分页器 -->
     <div class="swiper-pagination"></div>
   
     <!-- 如果需要导航按钮 -->
     <div class="swiper-button-prev"></div>
     <div class="swiper-button-next"></div>
   </div>
   

4. 生成 Swiper 实例，实现展示效果,必须在所有 DOM 结构生成后起效
   先引入import Swiper from "swiper";
   在生命周期或方法里添加如下代码将 swiper 实例化

   var mySwiper = new Swiper("获取到的DOM节点", {
       loop: true,
       // 如果需要分页器
       pagination: {
         el: ".swiper-pagination",
         //点击小球的时候也切换图片
         clickable: true,
       },
       // 如果需要前进后退按钮
       navigation: {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev",
       },
     });
   

P106 图片懒加载

图片懒加载的意思是：在图片界面没有进入到可视范围前不加载, 在没有得到图片前先显示loading图片。用于节省流量，提升网页浏览体验。
步骤：

1. 安装三方包npm install vue-lazyload

2. 在 assets 文件内准备图片 loading.gif

3. 在 main.js 中引入配置

   import VueLazyload from 'vue-lazyload'
   import loading from '@/assets/images/loading.gif' //未加载得到图片之前的loading图片
   Vue.use(VueLazyload, { // 内部自定义了一个指令v-lazy
   loading,
   })
   

4. 将图片src换成v-lazy="Img"即可

P110 清除打包后map文件

用于节省项目体积，在 vue.config.js 中加上productionSourceMap:false 字段即可