vue中使用swiper并自定义分页器样式
一,安装swiper
执行命令 npm install vue-awesome-swiper --save
二,引入swiper
import {Swiper} from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
<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并自定义分页器样式的更多相关文章
- vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- 在vue中使用swiper组件
第一步:在终端的项目根目录下载安装swiper: cnpm/npm install vue-awesome-swiper --save; 第二步:在程序入口文件main.js中引用: import V ...
- vue中引入swiper(vue中的滑块组件vue-awesome-swiper)
第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...
- 【Vue中的swiper轮播组件】
<template> <swiper :options="swiperOption" ref="mySwiper"> <!-- s ...
- vue中使用Element主题自定义肤色
一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://element.eleme.io/#/zh-CN/component/custom-theme)来安装[主题生成工具] ...
- vue中添加swiper轮播插件
网上找了很多,最后还是官网最完整. https://github.com/surmon-china/vue-awesome-swiper 安装: 1.npm install vue-awesome-s ...
- vue中引入swiper插件
这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...
- vue中的swiper element ui
欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...
随机推荐
- seacms 6.45 命令执行漏洞分析
前言 这是一个比较老的漏洞了,不过漏洞原理还是挺有意思的. 正文 漏洞位于 search.php 文件中. 首先包含了 common.php, 这个文件里面做了一些初始化工作,其中最重要的是对提交参数 ...
- Mac系统查看端口占用和杀死进程
查看进程占用 lsof -i tcp:8080 该命令会显示占用8080端口的进程,有其 pid ,可以通过pid关掉该进程 杀死进程 kill pid 例如 kill 39394 转自:https: ...
- rabbitmq集群几个比较好的文章
以下几个链接可作为搭建rabbitmq集群是的参考,个人觉得写的很详细很好 1.RabbitMQ 高可用集群搭建及电商平台使用经验总结 http://www.cnblogs.com/wangiqngp ...
- .NET Reflector注册问题
reflector工具不错, 终于8.x了,也可以注册了,但是不小心注册成standard版本了,但vs中无法使用,于是各种删注册表,后来找到何英涛的解决方案 下面介绍一个Reflector很坑的一个 ...
- MVC中使用EF的技巧集(二)——分部验证
1.从数据库生成模型后,再次更新模型时,之前设置的验证规则会丢失. 解决方法:在Models文件夹中新建一个空白类,把它命名为shujuyanzh.cs(类名可以自定),然后把Models中自动生成的 ...
- ApplicationEventMulticaster接口笔记
ApplicationEventMulticaster 这个接口可以管理很多个ApplicationListener对象.并将事件发布给这些监听器. ApplicationEventPublisher ...
- Requests中文乱码解决方案
分析: r = requests.get(“http://www.baidu.com“) **r.text返回的是Unicode型的数据. 使用r.content返回的是bytes型的数据. 也就是说 ...
- 泛型和 Any 类型
泛型和 Any 类型 这两个类型看起来很相似,但是一定要小心两者的区别.他们区别在于 Any 类型会避开类型的检查,所以尽量少用最好不用.泛型一方面很灵活一方面也很安全,下面举个例子感受下两者的区别: ...
- 当网页失去焦点时改变网页的title值
<script> document.addEventListener('visibilitychange', function() { var isHidden = document.hi ...
- linux下mysql忘记密码怎么办
前言 今天在服务器安装mysql之后,登录发现密码错误,但是我没有设置密码呀,最后百度之后得知,mysql在5.7版本之后会自动创建一个初始密码. 报错如下: [root@mytestlnx02 ~] ...