一,安装swiper

执行命令 npm install vue-awesome-swiper --save

二,引入swiper

import {Swiper} from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

 
三,使用swiper,不废话,上代码。

<template>
<div class="page">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="imgCard" src="../assets/swiper1.jpg" alt>
</div>
<div class="swiper-slide">
<img class="imgCard" src="../assets/swiper2.jpg" alt>
</div>
<div class="swiper-slide">
<img class="imgCard" src="../assets/swiper3.jpg" alt>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
export default {
data() {
return {
dialogShow: false
};
},
mounted() {
this._initSwiper();
},
methods: {
_initSwiper() {
var mySwiper = new Swiper(".swiper-container", {
direction: "horizontal",
loop: true,
autoplay: true, //自动轮播
speed: 1000,
pagination: {
el: ".swiper-pagination",
type: "custom",
renderCustom: function(swiper, current, total) {
var customPaginationHtml = "";
for (var i = 0; i < total; i++) {
//判断哪个分页器此刻应该被激活
if (i == current - 1) {
customPaginationHtml +=
'<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
} else {
customPaginationHtml +=
'<span class="swiper-pagination-customs"></span>';
}
}
return '<span class="swiperPag">'+customPaginationHtml+'</span>';
}
}
});
}
}
};
</script>
<style lang="scss" >
.swiperPag {
width:4.5rem;
height: 0.07rem;
border-radius: 0.04rem;
display: flex;
align-items: center;
margin:0 auto;
background-color: rgba($color: #000000, $alpha: 0.8)
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
bottom:0.27rem;
}
.swiper-pagination-customs {
width: 1.5rem;
height: 0.14rem;
display: inline-block;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
width: 1.5rem;
height: 0.14rem;
display: inline-block;
border-radius: 0.07rem;
background-color: #28a7e1;
}
</style>

注意:

  • style标签不要加scoped,否则样式加不上!
  • 直接npm install swiper --save 下载的是swiper4,build打包时,会报错如下: Unexpected token: name (Dom7) [./~/swiper/~/dom7/dist/dom7.modular.js:16,0][static/js/vendor.cf492f2bb7f8b02ec428.js:16311,6]

到后来才发现,这样写是有问题的,当路由切换后再次进入该页面轮播就停止了,然后就做了如下更改。

export default {
data() {
return {
dialogShow: false,
mySwiper: {},
};
},
activated() {
this._initSwiper(); // 初始化swiper
},
deactivated() {
this.mySwiper.destroy();// 销毁swiper
},
methods: {
_initSwiper() {
this.mySwiper = new Swiper(".swiper-container", {
direction: "horizontal",
loop: true,
autoplay: true, //自动轮播
speed: 1000,
pagination: {
el: ".swiper-pagination",
type: "custom",
renderCustom: function(swiper, current, total) {
var customPaginationHtml = "";
for (var i = 0; i < total; i++) {
//判断哪个分页器此刻应该被激活
if (i == current - 1) {
customPaginationHtml +=
'<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
} else {
customPaginationHtml +=
'<span class="swiper-pagination-customs"></span>';
}
}
return '<span class="swiperPag">'+customPaginationHtml+'</span>';
}
}
});
}
}
};

vue中使用swiper并自定义分页器样式的更多相关文章

  1. vue中修改swiper样式

    问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...

  2. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  3. 在vue中使用swiper组件

    第一步:在终端的项目根目录下载安装swiper: cnpm/npm install vue-awesome-swiper --save; 第二步:在程序入口文件main.js中引用: import V ...

  4. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

  5. 【Vue中的swiper轮播组件】

    <template> <swiper :options="swiperOption" ref="mySwiper"> <!-- s ...

  6. vue中使用Element主题自定义肤色

    一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://element.eleme.io/#/zh-CN/component/custom-theme)来安装[主题生成工具] ...

  7. vue中添加swiper轮播插件

    网上找了很多,最后还是官网最完整. https://github.com/surmon-china/vue-awesome-swiper 安装: 1.npm install vue-awesome-s ...

  8. vue中引入swiper插件

    这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...

  9. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

随机推荐

  1. vs code上配置Scala

    转自:https://www.cnblogs.com/steven-yang/p/5852988.html 百度的结果表达太奇怪,简单记一笔. 1.下载一个scala的压缩包,https://www. ...

  2. 压力测试Jmeter+badboy

    压力测试Jmeter+badboy 前言:很多人都想学习压力测试,但是一开始手动写脚本着实蛋疼,所以今天我教大家的是利用badboy来录制压测脚本,然后用Jmeter来做压力测试. 流程:badboy ...

  3. Spring面试 IOC和AOP的理解

    spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...

  4. RequestMapping 支持的方法

    基于版本:Spring Framework 4.3.5.RELEASE 1.支持指定多个方法 @RequestMapping(value = "/index", method = ...

  5. visual box 安装 centos7后,无法上网

    ifconfig  命令后,只看到个回环网卡: 进入 /etc/sysconfig/network-scripts后,发现有设备 visual box 中设置为“桥接网卡”,也没问题,最后把控制芯片改 ...

  6. js中问号

    是三目运算,如:(a==b)?a:b 也就是说,先判断a是否等于b,如果是(true),那么返回a,如果否(false),则返回b greeting=(visitor=="PRES" ...

  7. laravel with嵌套的渴求式加载

    今天在通过需求表A查询场地类型表B,然后通过表B的场地类型id去查询表C场地类型名的时候遇到了一个小的问题. 需求表A的字段:id.user_id .name等等: 中间表B的字段:id.appeal ...

  8. php图片处理类

    代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...

  9. ZT C/C++变量命名规则,个人习惯总结

    C/C++变量命名规则,个人习惯总结 (2012-10-31 13:48:10) 转载▼ 标签: c/c变量命名规则 c语言变量命名 c变量命名 规则规范 it 分类: C/VC C_C++变量命名规 ...

  10. Reporting Service编程----访问Web服务

    将报表服务器 Web 服务的引用添加到项目中后,下一步是创建 Web 服务代理类的实例. 然后,您可以通过调用代理类中的方法来访问 Web 服务的方法. 当你的应用程序调用这些方法时,代理类生成的代码 ...