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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
js生成随机数的过程解析
Nov 24 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
微信小程序实现身份证取景框拍摄
Sep 09 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
mac系统安装Python3初体验
2018/01/02 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python os模块常用方法和属性总结
2020/02/20 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
师范生的个人求职信范文
2014/01/04 职场文书
老师给学生的表扬信
2014/01/17 职场文书
西式婚礼主持词
2014/03/13 职场文书
党课培训心得体会
2014/09/02 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
世界名著读书笔记
2015/06/25 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL