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 DOM学习第六章 表单实例
Feb 19 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
jQuery的框架介绍
May 11 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 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函数(简单整理)
2010/04/30 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
js 调整select 位置的函数
2008/02/21 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python实现简单多人聊天室
2018/12/11 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python脚本开机自启的实现方法
2019/06/28 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
通用C#笔试题附答案
2016/11/26 面试题
大四学生思想汇报
2014/01/13 职场文书
中秋节主持词
2014/04/02 职场文书
迎新年主持词
2015/07/06 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
文书工作总结(范文)
2019/07/11 职场文书
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis