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 相关文章推荐
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
ASP知识讲座四
2006/10/09 PHP
用PHP连接Oracle数据库
2006/10/09 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
解决Python使用列表副本的问题
2019/12/19 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
七一表彰活动方案
2014/01/18 职场文书
学生会主席竞聘书
2014/03/31 职场文书
会计学自荐信
2014/06/03 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python