vue2 里边使用 swiper2
找过了很多轮播图插件,我都不会用,还是回到swiper2吧。。。
npm install swiper@2.7.6 --save-dev
封装成一个组件
<template>
<div class="lunbo" :class="name" :style="{height: h+'rem'}">
<div class="swiper-container" v-if="type==1">
<div class="fuck swiper-wrapper">
<div class="swiper-slide" v-for="item in banners">
<img :src="item">
</div>
</div>
<div class="swiper-pagination"></div>
</div> <div class="swiper-container" v-if="type==2">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in banners">
<a :href="item.turnUrl"><img :src="item.img"></a>
</div>
</div>
<div class="swiper-pagination"></div>
</div> <div class="swiper-container" v-if="type==3">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in banners">
<a :href="item.turnUrl">{{item.content}}</a>
</div>
</div>
<div class="swiper-pagination" v-show="false"></div>
</div>
</div>
</template> <script>
import 'swiper/dist/idangerous.swiper.css'
import Swiper from 'swiper/dist/idangerous.swiper.js'
export default {
props: ['banners','type','h','name'],
data () {
return {}
},
watch: {
},
mounted: function () {
let vm = this;
new Swiper('.'+vm.name+' .swiper-container', {
loop: true,
autoplay: 4000,
updateOnImagesReady : true,
autoplayDisableOnInteraction : false,
pagination: '.'+vm.name+' .swiper-pagination',
})
}
}
</script>
<style>
/*没有分页器 加scoped不会错 */
a{
cursor: pointer;
}
.lunbo{
margin: 0 auto;
position: relative;
}
.swiper-container{
height: 100%;
}
.swiper-slide{
height: 100%;
color: white;
}
.swiper-pagination {
position: absolute;
z-index: 20;
bottom: 10px;
width: 100%;
text-align: center;
}
/*分页器的样式*/
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #6d6df8;
margin: 0 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #fff;
}
</style>
vue2 里边使用 swiper2的更多相关文章
- 越来越受欢迎的Vue想学么,90后小姐姐今儿来教你
摘要:Vue的相关技术原理成为了前端岗位面试中的必考知识点,掌握 Vue 对于前端工程师来说更像是一门"必修课". 本文原作者为尹婷,擅长前端组件库研发和微信机器人. 我们发现, ...
- Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统
最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlser ...
- 适用初学者:vue2.0构建单页应用最佳实战
参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...
- Vue2全家桶之二:vue-router(路由)详细教程,看这个就够了
作者:东西里本文转载于:https://www.jianshu.com/p/514c7588e877来源:简书 转载仅供自己日后看方便. 由于Vue在开发时对路由支持的不足,于是官方补充了vue- ...
- 重开Vue2.0
目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...
- cordova打包vue2(webpack)android、ios app
使用cordova打包vue2(webpack)app for android ios1.vue项目通过vue-cli脚手架建立项目,使用webpack进行打包,下边是一整套命令. #npm 版本最好 ...
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...
- Vue2.0 【第一季】第3节 v-for指令:解决模板循环问题
目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...
- Vue2.0 【第四季】第1节 实例入门-实例属性
目录 Vue2.0 [第四季]第1节 实例入门-实例属性 第1节 实例入门-实例属性 一.Vue和Jquery.js一起使用 二.实例调用自定义方法 Vue2.0 [第四季]第1节 实例入门-实例属性 ...
随机推荐
- Java WebService接口生成和调用 图文详解>【转】【待调整】
webservice简介: Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范实施的应用之间 ...
- flyway和liquibase的使用样例
在代码上我们有svn和git等诸多的版本控制方法. 但是在数据库上却没有相应的工具.一度导致多环境见的数据库同步难以维持. flyway和liquibase都是常见的数据库版本控制工具. flyway ...
- 抓包工具Charles基本用法
我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据.或者使用Http ...
- JN_0004:轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码
百度访问统计代码JavaScript源码:红色加粗部分将是要修改的地方.eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"&qu ...
- 不定参数对arguments对象的影响
如果声明函数时定义了不定参数,则在函数被调用时,arguments对象包含了所有传入的参数: function checkArgs(...args){ console.log(args.length, ...
- ASP .NET Core HTTP Error 502.5 – Process Failure
页面返回错误 事件日志显示错误 大家可以先看着个链接 https://docs.microsoft.com/en-us/aspnet/core/publishing/iis?tabs=aspnetco ...
- innodb表碎片处理
本次测试环境是 mysql 5.7.23,表空间为每个表单独表空间 mysql> sHOW VARIABLES LIKE 'innodb_file_per_tabl%'; +---------- ...
- List的分组,求和,过滤操作
package ---; import java.math.BigDecimal; import java.util.*; import java.util.stream.Collectors; /* ...
- python使用stomp连接activemq
一.安装ActiveMQ服务 1. 当使用windows时,安装参考:https://blog.csdn.net/WuLex/article/details/78323811 启动:运行activem ...
- 初学者如何理解tomcat服务器?
Tomcat介绍:Tomcat服务器是一个免费的开放源代码的Web应用服务器.当配置正确时,Apache为HTML页面服务,而Tomcat实际上运行JSP页面和Servlet.另外,Tomcat和II ...