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 相关文章推荐
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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 is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
css图片自适应大小
2007/11/28 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
吸烟检讨书2000字
2014/02/13 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
读书活动总结范文
2014/04/26 职场文书
团队队名口号大全
2014/06/06 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
社区服务活动报告
2015/02/05 职场文书
会计专业自荐信范文
2015/03/05 职场文书
湘江北去观后感
2015/06/15 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis