在 vue 中使用 swiper 的异步问题解决

一、html 及引入文件

1.引入文件

vue,axios,mock,swiper,jquery的js文件

swiper css文件

2.css样式

给 swiper 设置宽高

3.html

swiper html

swiper使用方法:  https://www.swiper.com.cn/usage/index.html

二.渲染数据

1.  用mock生成随机虚拟数据

2. 用 axios 执行get请求 请求数据 并赋值给data中的imgList

3.循环使用v-for指令绑定数据渲染

4.methods中编辑初始化 Swiper 方法

4.在created 中调用

调用以渲染页面

三.具体问题

1.初始化完成后 swiper 轮播出现问题1:不能自动切换

1)问题产生原因:

axios 执行get指令是异步请求

即在axios请求数据过程中 initSwiper运行时要绑定的部分元素节点还没有创建成功

导致swiper插件中部分指定并没有绑定到指定元素节点上

导致swiper轮播出现异常

2)解决方法:

swiper中的observer方法,在启动状态下,当我们修改swiper的子元素时,会自动初始化swiper

即  observer:true,

并该指令一般情况下搭配 observeParents:true,一起使用 即当Swiper的父元素变化时,会更新swiper

3) 更改部分:

增加 observer: true, observeParents: true,

2.更改完成后 swiper 轮播出现问题2:切换到最后一张即停止

1)问题原因:

在jQuery中 当得到数据时,是边加载边更新Dom

但是在Vue中 当得到数据时, 而是全部加载完以后再更新Dom

即在这个问题中, initSwiper运行完之后,axios请求到的数据才加载完并更新Dom

在一开始容器中的数据并没有渲染 此时swiperOption配置的loop: true不生效

而即使swiper更新 而loop属性却并不会重新加载 即loop为false

2)解决方法:

方法① 给initSwiper添加定时器 即等到axios数据加载完并渲染完页面以后再运行

添加定时器

但是在比较大的项目中,数据请求时间可能远远大于300ms 影响用户体验 所以不推荐使用

方法②不在created中调用initSwiper 而是在axios中调用initSwiper

并且利用 setTimeout(()=>{ },0)的异步请求属性 即等待axios的get指令请求和渲染完 再执行。

方法③类似于方法②

在vue中有Vue.nextTick( [callback, context] )机制

即在下次 DOM 更新循环结束之后执行延迟回调。

即this.$nextTick(()=>{})

四.核心代码

1.observer: true, observeParents: true,

2.this.$nextTick(()=>{})

原文地址:https://www.cnblogs.com/rabbit23/p/11029412.html

时间: 2024-10-04 21:41:49

在 vue 中使用 swiper 的异步问题解决的相关文章

vue-cli -- vue中使用swiper

一.滑块组件 1.vue中Swiper 1.安装swiper npm install swiper -S 2.启用swiper Vue.use(swiper) 3.引入swiper样式 在index.html或者main.js文件中引入css样式文件 import '../swiper.css' 原文地址:https://www.cnblogs.com/zjh-study/p/10647782.html

vue中修改swiper样式

问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang="scss"> .swiper-container{ .swiper-pagination{ .swiper-pagination-bullet{ width: 14px; height: 14px; } } } </style>// 项目中多次使用swiper 的话 就

vue中引入swiper插件

这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' 3.然后注册全局的swiper Vue.use(VueAwesomeSwiper) 4.在模板中使用 //引入swiper.cssrequire('swiper/dist/css/swiper

解决几个vue中是swiper插件遇到的bug

1.在使用swiper插件的时候,如果内容都是静态资源的话不会出现错误,但是动态的话会出现划不动,或者白屏 分析:这种bug是怎样出现的,一般都是初始化的位置不对 方法: swiperInit() { var mySwiper = new Swiper('.swiper-container', { pagination : '.swiper', paginationType : 'bullets', autoplay : 200, }) } //这个是swiper的初始化方法,如果你是在crea

vue中引入swiper

import { swiper, swiperSlide } from 'vue-awesome-swiper' data () { return { swiperOption: { height: 160, speed: 2000, autoplay: 3000, direction: 'vertical', autoHeight: true, loop: true } }}, swiper(:options='swiperOption' v-loading='loading' element

vue中使用Swiper

第一步:安装swiper在项目目录下打开命令窗口输入命令:npm install swiper 第二步:引入js文件 第三步:引入css文件在main.js文件中引入css文件 原文地址:https://www.cnblogs.com/manban/p/11075725.html

vue中使用axios(异步请求)和mock.js 模拟虚假数据

一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二.使用mock 1.安装 npm install --save mockjs 2.创建mock目录 3.创建mock.js 4.引用 import mockData from './mock/mock' 5.使用 this.Axios.post('/getNewsList/').then(funct

3. vue中导入animate.css动画库、Swiper轮播图组件

1. vue中导入animate.css动画库 2. vue中使用Swiper轮播图插件 注意:swiper常用设置 原文地址:https://www.cnblogs.com/qfshini/p/12120612.html

vue03----生命周期、nextTick()、ref、filter、computed、vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到什么问题、踩过的坑)

### 1.vue的组件和实例都有生命周期,而且是一样的 生命周期:(组件从创建到销毁的过程) 创建 挂载 更新 销毁 组件到达某一个阶段就会自动触发某一些函数,这个函数就叫生命周期的钩子函数. 创建:组件创建的时候触发 beforeCreate created     组件刚创建的数据请求 挂载:创建完成挂载前后触发 beforeMount mounted     DOM的初始化操作 更新:数据发生改变的时候触发 beforeUpdate updated     数据的变化监听,尽量不要在这里