关于vue2使用swiper4的踩坑记录

目录
  • 前言
  • 踩坑1：为了保证稳定，每次在package.json更该版本，最好立即下载当前版本，随后重启webstorm。
  • 踩坑2：引入位置
  • 踩坑3：使用空间，如果是轮播图内套轮播图，则需要注意命名，或者干脆采用id获取
  • 踩坑4：版本更迭导致无法通用
  • 踩坑5：动态渲染导致的各种bug。
  • 附：Vue 引入swiper出错解决方案参考
  • 总结

前言

一开始打算采用最新的swiper7，后来好像是vue2兼容性问题，各种报错，所以从7退回到6，然后退回到5,5则是遇到鼠标滚轮事件的bug，于是再度回滚，到4终于画风正常了。

首先是引入

npm i swiper

↑这句话不是复制的，是因为出错太多，反复引用导致了可以直接手打的地步。

值得一提的是，下载会默认下载7，直接用艾特符号标定不如直接改版本重新下，此时需要在package.json里面调成版本4后重新下载

踩坑1：为了保证稳定，每次在package.json更该版本，最好立即下载当前版本，随后重启webstorm。

其他软件不清楚是否是必须。

踩坑2：引入位置

如果焦急的你看到这篇博客，而且不介意回滚到4的话，可以下载版本4，随后在需要轮播图的地方引入这三句话

import 'swiper/dist/js/swiper'
import 'swiper/dist/css/swiper.css'
import Swiper from "swiper"

这样就可以去官网拷代码了。new Swiper写在mouted里面。

踩坑3：使用空间，如果是轮播图内套轮播图，则需要注意命名，或者干脆采用id获取

我的代码：

this.swiper = new Swiper(".swiper-container-son1", {})

踩坑4：版本更迭导致无法通用

最简单的一个，前进后退的属性

官网3的示例：

nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

官网的版本7的示例:

navigation: {
     nextEl: ".swiper-button-next",
     prevEl: ".swiper-button-prev",
 },

这里采用的是官网版本7才能生效

绝大部分都是官网 7生效，但是小部分却是要版本4才能生效。

还有一个极致坑爹的属性，滚轮

省略*你妈买菜必超级加倍，跳广场舞永无C位*等脏话。

官网的官方api、swiper3以及swiper7的示例都是同一句

mousewheelControl : true,

但是，也许是swiper4特供，也许是各种不可名状的bug，真正在swiper4可用的代码是

mousewheel: true,

踩坑5：动态渲染导致的各种bug。

如果你的轮播数据来源是请求数据，那么需要补上一句

observer: true,//修改swiper自己或子元素时，自动初始化swiper

或者干脆做的更绝，直接在list监听里面写

watch: {
    imgList() {
        setTimeout(() => {
            // eslint-disable-next-line no-unused-vars
            this.swiper = new Swiper(".swiper-container-son1", {
                speed: 1000,
                autoplay: {
                    delay: 4000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                }
            })
        }, 0)
    }
},

这样可以保证在请求完成之后再执行插件。

附：Vue 引入swiper出错解决方案参考

  • 可能是scss文件未安装。vue-awesome-swiper 的scss文件要单独安装。并不随包一块导入。 cnpm install --save swiper swiper/swiper-bundle.css swiper/swiper.scss

总结

到此这篇关于vue2使用swiper4踩坑的文章就介绍到这了,更多相关vue2使用swiper4踩坑内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue2.0使用swiper组件实现轮播效果

    轻松实现vue2.0轮播效果,供大家参考,具体内容如下 1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swi

  • vue-swiper的使用教程

    swiper是我之前做前端页面会用到的一个插件,我自己认为是非常好用的.swiper提供了形式多种多样.适应各个终端的轮播图效果.本文是小编给大家带来的vue-swiper的使用教程. vue-awesome-swiper官网链接https://www.npmjs.com/package/vue-awesome-swiper 和上一篇随笔一样,我们先下载包,然后去main.js里面配置. npm install vue-awesome-swiper --save 我们可以用import的方法 /

  • vue 中swiper的使用教程

    Install 在vue cli下的使用 npm install vue-awesome-swiper --save 在main.js中 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) 在component.vue中 <template> <div id="container"> <

  • 分享vue里swiper的一些坑

    实例: 错误(无法显示出分页器按钮,此功能不适用与for循环出来的图片,只有当该页面图片固定几张时能正常用) 第一步: 安装  npm i swiper (vue插件自带) 第二步: 在当前页面里引入 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 第三步:当然呐,或许你在想内容呐,别急,为了大家的方便内容的写法我也会提供 <html代码> <div class="swiper-cont

  • vue引入swiper插件的使用实例

    本文介绍了vue引入swiper插件,分享给大家,希望对大家有帮助 步骤一:安装vue, $ npm install vue 步骤二:创建vue项目 # 全局安装 vue-cli $ npm install -g vue-cli $ cd my-project $ npm install $ npm run dev 上面这些就是安装好vue项目,最主要的就是下面的步骤 步骤三:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下. 步骤四:  安装run

  • Vue框架里使用Swiper的方法示例

    下载swiper 首先使用npm 或者cnpm下载swiper cnpm install swiper 引入swiper import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 使用swiper <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swi

  • 关于vue2使用swiper4的踩坑记录

    目录 前言 踩坑1:为了保证稳定,每次在package.json更该版本,最好立即下载当前版本,随后重启webstorm. 踩坑2:引入位置 踩坑3:使用空间,如果是轮播图内套轮播图,则需要注意命名,或者干脆采用id获取 踩坑4:版本更迭导致无法通用 踩坑5:动态渲染导致的各种bug. 附:Vue 引入swiper出错解决方案参考 总结 前言 一开始打算采用最新的swiper7,后来好像是vue2兼容性问题,各种报错,所以从7退回到6,然后退回到5,5则是遇到鼠标滚轮事件的bug,于是再度回滚,

  • vue2.x background:url()的踩坑记录

    vue2.x background:url()的踩坑记录

    目录 background:url()的踩坑记录 backgroundImage路径问题 处理方法 background:url()的踩坑记录 开发模式下vue中background: url(‘../../assets/img/xxxxx’)直接写在行间样式不生效,即不能直接在标签中style属性中写, 必须写在非行间样式才会生效. 如果要写在行间样式中,需要对资源进行导入,比如ES规范的import或者CommomJS规范的require backgroundImage路径问题 项目中图片都

  • 详解vue-class迁移vite的一次踩坑记录

    目录 what happen 探究 解决 总结 what happen 最进项目从 vue-cli 迁移到了 vite,因为是 vue2 的项目,使用了 vue-class-component类组件做 ts 支持.当然迁移过程并没有那么一帆风顺,浏览器控制台报了一堆错,大致意思是某某方法为 undefined,无法调用.打印了下当前 this,为 undefined 的方法都来自于 vuex-class 装饰器下的方法.这就是一件很神奇的事,为什么只有 vuex-class 装饰器下的方法才会为

  • .net core 3.1在iis上发布的踩坑记录

    前言 写这篇文章的目的是希望像我一样喜欢.net 的人在发布 core到 iis上时少走点弯路 网上找了些资料,其实实际操作比较简单,就是有几个坑很恶心 踩坑记录 首先是你的服务器需要有core 的运行环境,安装前先关闭iis dotnet-hosting-3.1.4-win.exe 可以去微软的官网找最新的版本(去微软的官网找你要的版本就好了) 安装成功后,第一个坑出现了,启动iis,发现原来在iis上的网站都报503错误了. 直接玩大了,最后发现就是这个东西搞的鬼,你卸载它iis之前的网站就

  • Linux/Docker 中使用 System.Drawing.Common 踩坑记录分享

    前言 在项目迁移到 .net core 上面后,我们可以使用 System.Drawing.Common 组件来操作 Image,Bitmap 类型,实现生成验证码.二维码,图片操作等功能.System.Drawing.Common 组件它是依赖于 GDI+ 的,然后在 Linux 上并没有 GDI+,面向谷歌编程之后发现,Mono 团队使用 C语言 实现了GDI+ 接口,提供对非Windows系统的 GDI+ 接口访问能力,这个应该就是libgdiplus.所以想让代码在 linux 上稳定运

  • Java踩坑记录之Arrays.AsList

    前言 java.util.Arrays的asList方法可以方便的将数组转化为集合,我们平时开发在初始化ArrayList时使用的比较多,可以简化代码,但这个静态方法asList()有几个坑需要注意: 一. 如果对集合使用增加或删除元素的操作将会报错 如下代码: List list = Arrays.asList("a","b","c"); list.add("d"); 输出结果: Exception in thread &q

  • Java踩坑记录之BigDecimal类

    前言 在java.math包中提供了对大数字的操作类,用于进行高精确计算,如BigInteger,BigDecimal类.而平常我们开发中使用最多的float和double只能适用于一般的科学和工程计算,如果要在比较精确的计算方面如货币,那么使用float和double会相应的丢失精度,因此用于精密计算大数字的类BigDecimal就必不可少了.所以BigDecimal适合商业计算场景,用来对超过16位有效位的数进行精确的运算.但是BigDecimal的使用并不像float和double那样,使

  • 关于python scrapy中添加cookie踩坑记录

    问题发现: 前段时间项目中,为了防止被封号(提供的可用账号太少),对于能不登录就可以抓取的内容采用不带cookie的策略,只有必要的内容才带上cookie去访问. 本来想着很简单:在每个抛出来的Request的meta中带上一个标志位,通过在CookieMiddleware中查看这个标志位,决定是否是给这个Request是否装上Cookie. 实现的代码大致如下: class CookieMiddleware(object): """ 每次请求都随机从账号池中选择一个账号去访

  • python中remove函数的踩坑记录

    摘要: 在python的使用过程中,难免会遇到要移除列表中对象的要求.这时可以使用remove函数. 对于python中的remove()函数,官方文档的解释是:Remove first occurrence of value.大意也就是移除列表中等于指定值的第一个匹配的元素. 语法 list.remove() 参数 obj 参数:从列表中删除的对象的索引 返回值 删除后不会返回值 常见用法: a = [1,2,3,4],a.remove(1),然后a就是[2,3,4]:对于a = [1,1,1

  • Echarts在Taro微信小程序开发中的踩坑记录

    Echarts在Taro微信小程序开发中的踩坑记录

    背景 近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库 对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小 由于笔者对e

随机推荐