Vue引用Swiper4插件无法重写分页器样式的解决方法


Posted in Javascript onSeptember 27, 2018

最近在尝试用nuxtjs来搭建新的站点,但是平时在jquery里面用惯的一些插件一到vue上面引用就各种不顺畅~本文记录一下在用Swiper插件来做轮播图的时候遇到的问题~至于怎么在vue里面引用插件就不累赘了,npm能告诉你~

Swiper的分页器是靠mounted()挂载到Vue组件上而不是直接写在template里,所以在style scoped中写的样式无法作用到分页器的点上。解决办法是把重写的样式写在scoped之外。(以下截图不完整,仅用做说明)

template:

Vue引用Swiper4插件无法重写分页器样式的解决方法

script:

Vue引用Swiper4插件无法重写分页器样式的解决方法

<style scoped></style>里面写不受影响的样式(template里面有的类名)

Vue引用Swiper4插件无法重写分页器样式的解决方法

在<style scoped></style>下面新建一个<style></style>,在<style></style>里面写分页器分页点的样式

Vue引用Swiper4插件无法重写分页器样式的解决方法

重写之后的样子:

Vue引用Swiper4插件无法重写分页器样式的解决方法

以上这篇Vue引用Swiper4插件无法重写分页器样式的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
Vue组件化开发思考
Feb 02 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 #Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 #Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 #Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 #Javascript
axios 封装上传文件的请求方法
Sep 26 #Javascript
axios取消请求的实践记录分享
Sep 26 #Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 #Javascript
You might like
最简单的PHP程序--记数器
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python求解平方根的方法
2015/03/11 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
python实现各种插值法(数值分析)
2019/07/30 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
python Zmail模块简介与使用示例
2020/12/19 Python
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
一套比较完整的软件测试人员面试题
2012/05/13 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
党员岗位承诺书
2014/03/25 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
中学生励志演讲稿
2014/04/26 职场文书
班级读书活动总结
2014/06/30 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
优秀志愿者感言
2015/08/01 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript