<template>
<div>
//第一个轮播 加了v-if 判断,可以实现 loop 轮循
<swiper v-if="gglist.length>1" :options="swiperOption" ref="mySwiper" class="swiper-box">
<!-- slides -->
<swiper-slide v-for="m in gglist">{{m}}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
////第二个轮播 没加判断 不能实现loop 可试试看
<swiper :options="swiperOption" ref="mySwiper2" class="swiper-box">
<!-- slides -->
<swiper-slide v-for="m in gglist">{{m}}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template> <script>
//前提你已经下载好vue-awesome-swiper,swiper.min.css 引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'
Vue.use(VueAwesomeSwiper) export default{
components: {
swiper:VueAwesomeSwiper.swiper,
swiperSlide:VueAwesomeSwiper.swiperSlide
},
data(){
return{
//配置
swiperOption: {
loop : true,
speed: 900,
notNextTick: true,
autoplay:true,
preloadImages: false,
pagination: {
el: '.swiper-pagination',
},
paginationClickable :true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
gglist:[],//存放的数据list,数据的获取是异步的 }
},
beforeCreate:function(){ },
created:function(){ },
beforeMount: function () { },
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted:function(){
setTimeout(function(){
this.gglist = response.data.pl;
},10);
})
}
}
</script>

需求:需要异步的获取数据并加载到现在轮播图中,因为是异步加载的,在数据还没有插入到dom中,swiper已经初始化完毕,因为也没找到重新初始化的方法,所以就会出现一个当配置loop的时候却无法生效,当使用v-if的时候就可以解决,这个问题,有了图片才去加载这个dom,才去初始化轮播就可以避免swiper初始化的先后顺序;

if(this.infoData.picture.length>0){
// 轮播图相关配置
this.swiperOptionTop.loopedSlides = this.infoData.picture.length;
this.swiperOptionThumbs.loopedSlides = this.infoData.picture.length;
// 两个轮播相互绑定
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper;
const swiperThumbs = this.$refs.swiperThumbs.swiper;
swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop;
});
}

vue-awesome-swiper的dom例子:https://surmon-china.github.io/vue-awesome-swiper/

后来因为项目需要,不需要轮播,最后去掉轮播,发现缩略图控制的效果一直不太好,活动页第一个不是在最前面,最后页放弃了这样使用vue-awesome-swiper;

然后尝试直接使用swiper4.0,在vue项目中:

1、cnpm i swiper --save -dev ;

2、之后再需要的页面引入:import Swiper from 'swiper'    import 'swiper/dist/css/swiper.css'

3、

<div style="width:50%;height: 486px;">
<div v-show="infoData.picture.length==0" class="noImg"></div> <div v-show="infoData.picture.length > 0" class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(url, index) in infoData.picture" :key="index">
<img class="detailImg" referrerpolicy="no-referrer" :src="url"/>
</div>
</div>
</div>
<div v-show="infoData.picture.length > 0" class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(url, index) in infoData.picture" :key="index">
<img class="detailImg" referrerpolicy="no-referrer" :src="url"/>
</div>
</div>
<div class="swiper-button-prev" slot="button-prev"><i class="iconfont iconzuo" style="color: #FFFFFF;font-size: 14px;"></i></div>
<div class="swiper-button-next" slot="button-next" ref="nextbtn"><i class="iconfont iconyou" style="color: #FFFFFF;font-size: 16px;"></i></div>
</div> </div>

4、在mounted里面:

var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: false,
watchSlidesVisibility: true,
watchSlidesProgress: true,
observer:true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
observer:true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});

5、这样一般就可以使用了,我的废了老大劲在处理一个弱智问题,最后只因为我之前在css样式上写了这个,导致缩略图的激活状态一直不正确;手残

.gallery-thumbs .swiper-slide-active {
opacity: 1;
}

6、改成这样就可以正常的使用了:

.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}

不一定非得使用vue-awesome-swiper插件,还可以直接使用swiper像上面那样

vue-awesome-swiper中的数据异步加载的更多相关文章

  1. android的progressDialog 的使用。android数据异步加载 对话框提示

    在调用的Activity中定义一个全局的 progressDialog 点击按钮的时候调用下面这句 progressDialog = ProgressDialog.show(SearchActivit ...

  2. Vue(基础七)_webpack(webpack异步加载原理)

    ---恢复内容开始--- 一.前言 1.webpack异步加载原理’                                           2.webpack.ensure原理     ...

  3. Java 爬虫遇上数据异步加载,试试这两种办法!

    这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...

  4. EF如何操作内存中的数据以及加载相关联表的数据:延迟加载、贪婪加载、显示加载

    之前的EF Code First系列讲了那么多如何配置实体和数据库表的关系,显然配置只是辅助,使用EF操作数据库才是每天开发中都需要用的,这个系列讲讲如何使用EF操作数据库.老版本的EF主要是通过Ob ...

  5. 小程序中使用ECharts 异步加载数据

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-d ...

  6. Vue中router路由异步加载组件-优化性能

    何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...

  7. Angular4中利用promise异步加载gojs

    GoJS是一个实现交互类图表(比如流程图,树图,关系图,力导图等等)的JS库 gojs提供了angular的基本例子,不过是离线版 https://github.com/NorthwoodsSoftw ...

  8. Android学习笔记_36_ListView数据异步加载与AsyncTask

    一.界面布局文件: 1.加入sdcard写入和网络权限: <!-- 访问internet权限 --> <uses-permission android:name="andr ...

  9. android 数据异步加载

    public class MainActivity extends Activity { ListView listView; File cache; //访问其他线程在当前线程中存放的数据 Hand ...

随机推荐

  1. [ASP.NET Core 3框架揭秘] 跨平台开发体验: Windows [中篇]

    我们在<上篇>利用dotnet new命令创建了一个简单的控制台程序,接下来我们将它改造成一个ASP.NET Core应用.一个ASP.NET Core应用构建在ASP.NET Core框 ...

  2. CRC校验算法的实例解析

    概念   CRC校验算法,说白了,就是把需要校验的数据与多项式进行循环异或(XOR), 进行XOR的方式与实际中数据传输时,是高位先传.还是低位先传有关.对于数据 高位先传的方式,XOR从数据的高位开 ...

  3. 某酒店建筑设计CAD施工图

    本素材为某酒店建筑设计CAD施工图,其中包涵的有酒店室内装修图纸.各个标间房屋改造图以及酒店场外建筑施工图.其中图纸的格式都是为dwg格式的.想要查看图纸就可以使用CAD看图软件来进行查看.以下就是一 ...

  4. MySQL Error Log 文件丢失导致The server quit without updating PID file启动失败的场景

    今天在做mysql sniff测试的时候,中间重启MySQL实例的过程中,出现了"The server quit without updating PID file"这个经典的错误 ...

  5. Eclipse中如何添加相对路径的外部jar包

    在eclipse中进行java编程的时候,常常需要引用外部jar包.而采用相对路径引用jar包可以大大方便java工程的拷贝,这样使得java工程从一个路径转移到另一个路径时不用大费周章的修改外包ja ...

  6. cURL无法访问TLS网站故障解决

    大多数人都厌烦使用老旧的系统,无论软件还是硬件.但有的时候又不得不困守其中,坚持延续着系统的寿命,或者还需要点几柱香,祈求神佛的护佑. Linux是一个模块化极好的操作系统,得益于此,当其中有组件落伍 ...

  7. mysql DDL 锁表

    mysql DDL 锁表 select trx_state, trx_started, trx_mysql_thread_id, trx_query from information_schema.i ...

  8. JS表单内容垂直循环滚动

    参考博客:https://blog.csdn.net/yubo_725/article/details/52839493  大佬是真的厉害,保存一下,以方便后续使用 效果: 源码: <!DOCT ...

  9. [考试反思]1114csp-s模拟测试115:零迟

    最后一次了,允许自己混进榜里吧. 没有心态,原题不会做(真的忘了) T2的搜索没有分. 「 零 · 迟 」:酷刑 只有在最后的时刻才开始意识到,一切的一切都已经晚了. 就在眼前了.没有机会了. 退役, ...

  10. Git push error: http 411的解决方案总结

    目录 一.事故现场 二.事故原因 三.解决方案 一.事故现场 git push 的时候报错如下: 将分支推送到远程存储库时遇到错误:Git failed with a fatal error, the ...