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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
vue随机验证码组件的封装实现
Feb 19 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版(2)
2006/10/09 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
js实现自定义路由
2017/02/04 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python ftp上传文件
2016/02/13 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python如何快速实现分布式任务
2017/07/06 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
银行会计财务工作个人的自我评价
2013/10/29 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
元宵节寄语大全
2015/02/27 职场文书
酒店温馨提示语
2015/07/14 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
MySQL多表查询机制
2022/03/17 MySQL