swiper怎么使用为什么引入效果不一样？

来源：蜘蛛抓取(WebSpider) 时间：2022-10-04 04:05 标签： swiper组件

之前我的项目中遇到swiper的款式引入了不失效的问题，在网上搜了挺久也没找到解决办法。最初在GitHub的issue中找到了问题，记录一下不便后续遇到这个问题的小伙伴定位问题吧

在swiper的官网demo中，是通过间接引入scss文件进行款式的援用。
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

本文由整理发布，转载请注明出处，谢谢。

  1. 轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  2. 一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...

  3. 轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  1. 由于上周工作比较繁忙,所以这篇文章等了这么久才写(预告一下,下一个章节正式进入NVelocity篇,到时会讲解怎么使用NVelocity做一款简易的代码生成器,敬请期待!),好了正式进入本篇内容. 这 ...

  2. #重要说明 (1) windbg命令分为标准命令,元命令和扩展命令. 标准命令提供最基本的调试功能,不区分大小写.如:bp  g  dt  dv  k等 元命令提供标准命令没有提供的功能,也内建在调试 ...

  3. 第一天没什么好写的,这半年也没看什么书,就写写未来的规划好了. 当然是从最简单的健身计划开始写咯. 关键词:弹性 目标:减肥,上肢力量 时间:3-4次/周(Thur,Fri,Sat,Sun),1h-1 ...

  4. 这一题其实我没做出来.... 我只是想吐吐槽. 题目要求识别验证码,而且连一点特征信息都不给! 我去偷看了一下数据,然后根据数据生成了图片: 我相信当年没有人能拿分吧. 贴一下transform.cp ...

需求是 要在一个循环的列表中第一组数据后添加一个轮播，效果如下
由于所有循环的数据都是一个接口返回，并在一个数组中。由以下代码实现

// 此处无关代码省略

感觉上没什么问题，到浏览器里发现，其他轮播都可以滑动，唯独这个轮播不行。
排查过后发现，轮播样式生效了，但是swiper自动添加的class没加上，并且不可滑动，也就是说 swiper的js部分没生效
那就是初始化swiper的问题了。我是直接在mounted生命周期里初始化的swiper，问题应该在这里，swiper的初始化在异步加载的数据渲染之前了。

猜测是swiper的初始化的顺序导致的，那就把初始化的操作延后试一下

调整完后，果然swiper正常了。并且之前其他swiper的loop失效的问题也解决了

我要回帖

更多关于 swiper组件 的文章

 

随机推荐