vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】

谁借莪１个温暖的怀抱￠ 2024-03-24 12:46 91阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  20.获取Banner轮播图的数据
     *  21.使用swiper轮播图插件
 *  本人其他相关文章链接

### 20.获取Banner轮播图的数据 ###

修改代码：

> src/api目录下新建mockAjax.js文件

//对axios二次封装
    import axios from "axios";
    import nprogress from "nprogress";
    //如果出现进度条没有显示：一定是你忘记了引入样式了
    import "nprogress/nprogress.css";
    //1、利用axios对象的vreate，区创建一个axios实例
    //2.：request就是axios，只不过稍微配置一下
    const requests = axios.create({
        //基础路径，requests发出的请求的时候，路径当中会出现api
        baseURL:'/mock',
        //代表请求超时的时间5s
        timeout: 5000,
    })
    //3、配置请求拦截器，在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
    requests.interceptors.request.use(config => {
        //进度条开始
        nprogress.start();
        //config：配置对象，对象里面有一个属性很重要，Header请求头
        return config;
    })
    //4、配置响应拦截器
    requests.interceptors.response.use((res) => {
        //成功的回调函数
        //进度条结束
        nprogress.done();
        return  res.data;
    },(error) => {
        //失败的回调函数
        console.log("响应失败"+error)
        return Promise.reject(new Error('fail'))
    })
    //5、对外暴露
    export default requests;

> 在src/api/index.js中对外暴露mockjs的方法

import mockRequests from "@/api/mockAjax"
    
    //获取banner（Home首页轮播图接口）
    export const mockGetBannerList = ()=> mockRequests.get("/banner")

> 在src/store/home/index.js补充查询轮播图数据的结构

import {getCategoryList, mockGetBannerList} from '@/api'
    //Home模块的小仓库
    //actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步
    const actions = {
        //获取首页轮播图的数据
        async mockGetBannerList(context) {
            let response = await mockGetBannerList();
            if (response.code == 200) {
                context.commit("MOCK_GET_BANNER_LIST", response.data)
            }
        }
    }
    //mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理
    const mutations = {
        MOCK_GET_BANNER_LIST(state, bannerList) {
            state.bannerList = bannerList
        }
    }
    //state代表仓库中的数据
    const state = {
        //轮播图的数据
        bannerList: []
    }

> 在src/pages/Home/ListContainer/index.vue补充触发调用

import { mapState } from "vuex";
    
    mounted() {
        //mounted:组件挂载完毕，正常说组件结构（DOM）已经全有了
        this.$store.dispatch("mockGetBannerList")
      },
      computed: {
        ...mapState({bannerList : state => state.home.bannerList})
      }

### 21.使用swiper轮播图插件 ###

> 安装命令：cnpm install --save swiper

修改代码如下：

> src/pages/Home/ListContainer/index.vue

<div class="swiper-container" ref="mySwiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="carousel in bannerList" :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>
            
    import Swiper from "swiper"     
    
    watch: {
        //方式2：watch + nextTick
        bannerList: {
          handler(newValue, oldValue) {
            this.$nextTick(() => {
              var mySwiper = new Swiper('.swiper-container', {
                loop: true, // 循环模式选项
    
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
                },
    
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
    
                // 如果需要滚动条
                scrollbar: {
                  el: '.swiper-scrollbar',
                },
              })
            });
          }
        }
      }

> src/main.js

//引入swiper样式
    import "swiper/css/swiper.css"

Swiper插件使用步骤：

1.  引入swiper包
2.  引入css样式
3.  准备dom结构
4.  实例化swiper

swiper用于前端或者android，用于展示轮播图的一款插件。

swiper官网：[https://www.swiper.com.cn/][https_www.swiper.com.cn]

`注意点0`：版本兼容

<table> 
 <thead> 
  <tr> 
   <th>vue版本</th> 
   <th>swiper版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>vue2</td> 
   <td>swiper6及以下版本</td> 
  </tr> 
  <tr> 
   <td>vue3</td> 
   <td>swiper7、8版本</td> 
  </tr> 
 </tbody> 
</table>

`注意点1`：使用swiper插件时，初始化swiper前页面结构div啥的必须存在，即先存在页面结构div节点然后才能初始化swiper。

`注意点2`：初始化swiper的第一个参数，可以是字符串也可以是真实DOM节点

方式1：class类的字符串
    var mySwiper = new Swiper ('.swiper', {})
    方式2：真实DOM节点
    var mySwiper = new Swiper (this.$refs.swiper, {})

`注意点3`：页面结构中的class类名不能随意瞎改，改了就不认识就没有效果了。

`注意点4`：

> 问题：我vue2项目安装的swiper7版本，引入css的时候报错：swiper7 ./swiper-.min.css is not exported from package

答案：请查看node\_modules/swiper/路径下压根没有swiper-.min.css，所以导致报错不存在该文件，原因在于vue2最高只能安装swiper6版本，swiper7是vue3适配的，所以重新安装swiper6版本或者swiper5版本就可以解决问题。

`注意点5`：

> 问题：轮播图结构在ListContainer组件中，在mounted中实例化swiper或者watch监听bannerList触发实例化swiper时，发现轮播图不动，且图片下方没有原点

![在这里插入图片描述][9c044d634aa04524aed51044247ffecc.png_pic_center]

`答案`：swiper实例化不能放在mounted中或者watch监听器中，因为/

这个标签结构还没有加载完整，mounted代表除异步调用外的标签结构加载完毕时触发，但是下面的div是异步加载的不在mounted范围内所以无效，而watch监听器虽然能监听到bannerList值改变了但是下面的循环div仍然还未加载结束所以也无效，也就是说实例化swiper的前提是结构化已经完全存在才可以。

那么修改方案有2种：

`（1）第一种方案：实例化swiper放在update()中`，缺点是：如果update()中方法使用了data中数据，那么每次data数据改变，就会实例化swiper一次，这明显不靠谱。

update() {
    var mySwiper = new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项
    
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
            },
    
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
    
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
    }

`（2）第二种方案：放在mounted()中写个定时器实例化swiper`，缺点是：图片下方的小球会在1秒后才刷新出来。

注意：定时器setTimeout()是规定时间后执行一次，而setInterval()方法是时间间隔重复执行n次，别用混了！

mounted() {   
        //因为dispatch当中涉及到异步语句，导致v-for遍历的时候结构还没完全因此不行
        setTimeout(()=>{
          var mySwiper = new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项
    
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
            },
    
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
    
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        }, 1000)
      }

`（3）方案3：最完美的解决方案：watch+nextTick 数据监听+监听已有数据变化`

nextTick：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

`注意点6`：

> 问题：引入swiper包是在ListContainer组件中引入的，为啥引入swiper的CSS样式却放在了main.js中？

`答案`：因为这个CSS的样式不仅在ListContainer组件中使用，还在Floor组件中使用，所以放在main.js中只需加载一次即可，其他组件就都可以使用了，避免重复引入多次。

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）+17.（优化）针对三级菜单联动进行优化，优化方向为减少查询】][vue_-day03_16._Search_TypeNav_17.]  
2.[vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】][vue_-day03_18._params_query_Header_TypeNav]  
3.[vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】][vue_-day03_vue_-19.mockjs_Home_ListContainer_Floor]  
4.[vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】][vue_-day03_20._Banner_21._swiper]  
5.[vue尚品汇商城项目-day03【22.开发Floor组件】][vue_-day03_22._Floor]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/12346e00d6464d59b4fe44eea9eb7bdb.png
[https_www.swiper.com.cn]: https://www.swiper.com.cn/
[9c044d634aa04524aed51044247ffecc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e4009e965d8a4ae6b9c400464fff38a3.png
[vue_-day03_16._Search_TypeNav_17.]: https://blog.csdn.net/a924382407/article/details/129893325
[vue_-day03_18._params_query_Header_TypeNav]: https://blog.csdn.net/a924382407/article/details/129893392
[vue_-day03_vue_-19.mockjs_Home_ListContainer_Floor]: https://blog.csdn.net/a924382407/article/details/129893467
[vue_-day03_20._Banner_21._swiper]: https://blog.csdn.net/a924382407/article/details/129893511
[vue_-day03_22._Floor]: https://blog.csdn.net/a924382407/article/details/129893541