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

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

1.jpeg

@[toc]

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

<!--banner轮播-->
        <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/

注意点0:版本兼容

vue版本 swiper版本
vue2 swiper6及以下版本
vue3 swiper7、8版本

注意点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时,发现轮播图不动,且图片下方没有原点

image.png

答案: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.(优化)针对三级菜单联动进行优化,优化方向为减少查询】
2.vue尚品汇商城项目-day03【18.合并params和query参数(Header组件+TypeNav组件)】
3.vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件)】
4.vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
5.vue尚品汇商城项目-day03【22.开发Floor组件】

目录
相关文章
|
1天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
1天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
20 9
|
18小时前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
18小时前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。
|
18小时前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
18小时前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景,可以根据项目的需求和架构选择合适的方法来实现模块的异步加载,以提高应用的性能和用户体验
|
18小时前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
1天前
|
JavaScript 搜索推荐 前端开发
Vue SSR 预渲染的广泛应用场景及其优势
【10月更文挑战第23天】Vue SSR 预渲染技术在众多领域都有着广泛的应用价值,可以显著提升网站的性能、用户体验和搜索引擎优化效果。随着技术的不断发展和完善,其应用场景还将不断拓展和深化
16 2
|
JavaScript 前端开发
模拟Vue数据的双向绑定
Vue的数据双向绑定功能一直为人称道, Vue数据的双向数据绑定主要依赖了Object.defineProperty,这里尝试用最简单的代码, 实现数据的双向绑定Demo MVVM ViewModel基本实现原理 Gi...
933 0
|
4天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表