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 相关文章推荐
js 操作select相关方法函数
Dec 06 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
js实现下一页页码效果
Mar 07 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
Destoon模板制作简明教程
2014/06/20 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python的socket编程入门
2018/01/29 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
python中常用的数据结构介绍
2021/01/12 Python
物流管理专业大学生自荐信
2013/10/04 职场文书
酒店总经理工作职责
2013/12/13 职场文书
英文商务邀请信
2014/01/22 职场文书
婚庆司仪主持词
2014/03/15 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
物业接待员岗位职责
2015/04/15 职场文书
环境卫生整治简报
2015/07/20 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫