昨天在上班中要做一个商品页面,需求是从后台接口获得轮播图的路径,然后传到封装好的组件中,本来以为很简单啊,没什么毛病,开始动手~

  东西很简单,新建一个banner组件 如下:

<template>
<!--全屏幕轮播图 -->
<!-- <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback" style = "width:16rem;height:5.12rem;"> --> <swiper :options="swiperOption" ref="mySwiper" :style = "warpStyle" style = "z-index:0;">
<!-- slides --> <swiper-slide v-for = "item in pages" :key = "item.url" > <img :src="item" class="swiper-lazy" :style = "warpStyle" > <div class="swiper-lazy-preloader"></div> </swiper-slide> <!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div> </swiper> </template> <script>
// require styles
import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
props:["warpStyle","pages"], name: 'carrousel',
data() {
return {
swiperOption: {
loop: true,
pagination: {
el: '.swiper-pagination',
},
autoplay:true,
delay:3000,
disableOnInteraction:false,
effect:"slide",
lazy: {
loadPrevNext: true,
},
}
}
}, computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
// console.log('this is current swiper instance object', this.swiper) },
components: {
swiper,
swiperSlide
} }
</script> <style>
.swiper-lazy-preloader{
background:transparent;
}
</style>

      然后新建个数组,获取之后直接赋值给数组,就当我以为大功告成时候,问题来了,第一张会自动跳过,而静态的却没有问题,经过千辛万苦才发现应该是swiper二次渲染的问题,那怎么办呢?那就让他开始不加载把,等到获取完了再引入呗,代码如下:

因为是项目的组件,所以使用的话还需要传入一个wrapStyle是包裹的样式,一个options是swiper的配置,需要的小伙伴自行使用把

不懂的话或者需要交流的朋友,可以加我qq:15274527

vue-awesome-swiper 第一张自动跳过的更多相关文章

  1. vue中输入框聚焦,自动跳转下一个输入框

    比如 点击入库,el-dialog弹出来,然后自动聚焦第一个输入框,当输入框有值的时候,自动跳转下一个输入框 这个需求 直接上菜: this.$refs.lbj.focus()其实直接这么写也可以,但 ...

  2. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...

  4. Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办?

    问题1:Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办? 答:在word2010中,菜单栏中最左侧选“文件”->“选 ...

  5. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  6. 轮播模仿臭美APP,vue,swiper

    介绍:轮播使用了swiper,重要用于移动端滑动,详情可查看官网 1.首先用npm安装        npm install swiper 2.main.js 中引入CSS     import 's ...

  7. grunt配置太复杂?发布一个前端构建工具,简单高效,自动跳过未更新的文件

    做前端项目,如果没有一个自动化构建工具,手动处理那简直就是坑爹O(∩_∩)O.于是上网了解了下,grunt用的人不少,功能也挺强大.看了一下grunt的配置(包括gulp),感觉稍显复杂.当时项目结构 ...

  8. 黄聪:如何阻止iframe里引用的网页自动跳转

    今天做了个网页,要在网页里设置一个iframe,然后套用其他的网站.使用http://luanqi-cat.blogbus.com 这个网址的时候,出现了莫名其妙的问题,我的网页居然会强制自动跳转到这 ...

  9. 如何阻止iframe里引用的网页自动跳转

    今天做了个网页,要在网页http://www.58shuwu.com/to/21766654/Legend%20of%20Miyue/ 里设置一个iframe,然后套用其他的网站.使用http://m ...

随机推荐

  1. (转)extern关键字两种场景的使用

    第一种场景 -- extern extern关键字的作用是声明变量和函数为外部链接,即该变量或函数名在其它文件中可见.用其声明的变量或函数应该在别的文件或同一文件的其它地方定义. 例如语句:exter ...

  2. Linux优雅退出问题

    问题:Springboot框架开发的项目中会内嵌tomcat容器,在杀死进程的时候tomcat为被正常杀死,导致端口未被释放,第二次启动的时候报端口冲突. 先讲一个基本概念:如何在shell中终止一个 ...

  3. pc端弹框

    pc弹框插件:http://aui.github.io/artDialog/doc/index.html#quickref-bubble PC端,手机端,layui很好用,分页啥的:http://ww ...

  4. 牛客国庆集训派对Day3 I. - Metropolis (Dijkstra变型)

    题意:求一个N个点无向图中,其中p个关键点间的最短距离. 分析:比较特殊的最短路,方式类似于多源BFS,将所有关键点装入优先队列,状态中需要包含其源点的id.对每条边都要遍历,对每个节点,需要记录其确 ...

  5. Hive环境安装

    说明: (Hbase依赖于Hadoop,同时需要把元数据存放在mysql中),mysql自行安装 Hadoop2.0安装参考我的博客: https://www.cnblogs.com/654wangz ...

  6. iOS开发之plist文件操作

    之前在想用代码去实现很多界面上能用interface builder可以拖进去的功能,现在想想真是够无知的啊.不仅效率低下,而且对于代码的维护带来不少麻烦,这段时间一直在反思看了design+code ...

  7. 在DLL编程中,导出函数为什么需要extern "C"

    转自:http://blog.csdn.net/zhongjling/article/details/8088664 一般来讲,在DLL编程过程中,对于导出的函数前 都需要加入 extern “C”, ...

  8. Python面试题之Python中type和object的关系

    知乎上看到的提问: 两个是互为实例的关系,但不是互为子类的关系,只有type是object的子类,反之则不成立. 大牛说两者是蛋生鸡鸡生蛋的关系,但我还是不明白,有懂的麻烦解释一下, 希望不要给出外文 ...

  9. webservice、WSDL简介

    Webservice是跨平台.跨语言的远程调用技术 通信机制的本质是xml数据交换 采用soap协议进行通信 而WSDL 指网络服务描述语言 (Web Services Description Lan ...

  10. 20144303 《Java程序设计》第四周学习总结

    20144303 <Java程序设计>第四周学习总结 教材学习内容总结 继承(extends): 1.作用:提高代码复用性 让类与类产生了关系,有了这个关系才有了多态的特性 2.注意:千万 ...