vue-awesome-swiper 第一张自动跳过
昨天在上班中要做一个商品页面,需求是从后台接口获得轮播图的路径,然后传到封装好的组件中,本来以为很简单啊,没什么毛病,开始动手~
东西很简单,新建一个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 第一张自动跳过的更多相关文章
- vue中输入框聚焦,自动跳转下一个输入框
比如 点击入库,el-dialog弹出来,然后自动聚焦第一个输入框,当输入框有值的时候,自动跳转下一个输入框 这个需求 直接上菜: this.$refs.lbj.focus()其实直接这么写也可以,但 ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...
- Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办?
问题1:Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办? 答:在word2010中,菜单栏中最左侧选“文件”->“选 ...
- MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动
MVC图片上传详解 MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...
- 轮播模仿臭美APP,vue,swiper
介绍:轮播使用了swiper,重要用于移动端滑动,详情可查看官网 1.首先用npm安装 npm install swiper 2.main.js 中引入CSS import 's ...
- grunt配置太复杂?发布一个前端构建工具,简单高效,自动跳过未更新的文件
做前端项目,如果没有一个自动化构建工具,手动处理那简直就是坑爹O(∩_∩)O.于是上网了解了下,grunt用的人不少,功能也挺强大.看了一下grunt的配置(包括gulp),感觉稍显复杂.当时项目结构 ...
- 黄聪:如何阻止iframe里引用的网页自动跳转
今天做了个网页,要在网页里设置一个iframe,然后套用其他的网站.使用http://luanqi-cat.blogbus.com 这个网址的时候,出现了莫名其妙的问题,我的网页居然会强制自动跳转到这 ...
- 如何阻止iframe里引用的网页自动跳转
今天做了个网页,要在网页http://www.58shuwu.com/to/21766654/Legend%20of%20Miyue/ 里设置一个iframe,然后套用其他的网站.使用http://m ...
随机推荐
- a=a+1背后的内存模型和CPU高速缓存
学过JAVA的人都知道,程序运行过程中的临时数据,都是从外部存储设备调入内存(物理内存)中,再进行读写操作的.而计算机在执行程序时,对程序的每条指令都是在CPU中执行的,而指令的执行,势必涉及到对数据 ...
- 记录:正确率、召回率、F值
因为不理解召回率,所以去查看了一些资料.特此记录一下自己的理解,以便以后查看. 说明 正确率=查出来正确的样本数/全部查出来的样本数 (也可以理解为查准率) 召回率=查出来正确的样本数/数据集里全部正 ...
- flask内置session原理
内置session原理 请求到来 当请求进来之后,先执行Flask对象的 __call__ 方法 def wsgi_app(self, environ, start_response): # 获取请求 ...
- python全栈开发从入门到放弃之socket并发编程多线程GIL
一 介绍 ''' 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple nati ...
- mysql数据库从删库到跑路之mysql基础
一 数据库是什么 之前所学,数据要永久保存,比如用户注册的用户信息,都是保存于文件中,而文件只能存在于某一台机器上. 如果我们不考虑从文件中读取数据的效率问题,并且假设我们的程序所有的组件都运行在一台 ...
- BZOJ 5427: 最长上升子序列
$f[i] 表示长度为i的最长上升子序列的最后一位的最小值是多少$ 对于普通的$LIS我们可以二分确定位置去更新$ 再来考虑对于这个,如果有某一位没有确定的话 那么这一位是可以随便取的,也就是说,所有 ...
- [HZNUOJ] 博
Description 定义一个数字序列为“非下降序列”: 此处我们约定用$n\;表示数字序列的长度,下面定义在n \in [1, \infty]时有效$ $if \;\; n = 1:$ $\;\; ...
- cocos2dx 3.x HttpRequest GET获取数据
.h文件 #include "network/HttpClient.h" //包含头文件 // GET 函数 void createGetHttp(); void getHttp_ ...
- c++之旅:模板库中的容器
容器 C++中的容器包括array, vector, list,map,set 数组 array不可变长,创建时其大小就固定了,array中可以存储各种数据类型包括对象,不过array是在栈上分配的, ...
- ansible playbook部署ELK集群系统
一.介绍 总共4台机器,分别为 192.168.1.99 192.168.1.100 192.168.1.210 192.168.1.211 服务所在机器为: redis:192.168.1.211 ...