当一个swiper组件在vue项目组中使用两次，第二次效果会覆盖第一次效果的解决办法：

最新推荐文章于 2023-06-19 12:05:40 发布
最新推荐文章于 2023-06-19 12:05:40 发布
阅读量941 收藏 1
点赞数
分类专栏： web前端开发 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1598452168yy/article/details/128355015
版权

原因是：当你第二次使用同一个组件的时候：

new Swiper('.swiper'，{})

两次实例化swiper，但是实例化的是同一个swiper：就是“.swiper”，所以下一次会把上一次给覆盖了，

解决办法是：

利用父组件给子组件传属性的原理，给组件传一个name属性，这个name属性要写不同的名字，然后在swiper里接收：

父组件给子组件传的name属性：(在组件使用时）

子组件接收name属性：

给子组件绑上动态的class名字，：

陌一一
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
解决vue中使用swiper插件问题及swiper在vue中的用法
10-18
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。这篇文章主要介绍了解决vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以参考下
vue2.0使用swiper组件实现轮播效果
12-29
轻松实现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-slide v-for=(item,$index) in deta
尚硅谷VUE项目-前端项目问题总结04-mock-vuex-swiper-组件复用
joan_yb的博客
03-20 519
尚硅谷VUE项目-前端项目问题总结04-mock-vuex-swiper-组件复用
微信小程序swiper bindChange重复执行
weixin_34029949的博客
04-27 547
swiper是微信小程序的一个滑动组件，非常重要。如果只是做简单的轮播图而不进行复杂的逻辑，直接可以使用，甚至不需要知道组件的方法。今天在做一个如下的页面时，快速滑动swiper出现了问题： 控制台打印，发现bindChange绑定的方法重复执行了，我们再看官方文档的解释： https://developers.weixin.qq.com/miniprogram/dev/compon...
小程序swiper组件的bindchange方法重复执行问题（解决真机无限滑动问题）
BubbleABC的博客
02-07 1014
修正方法 <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange" current="{{current}}"> swiperChange(e){ let current = e.detail.current; let source = e.detail.source //console.log(source);
如何在一个页面用多个swiper插件
热门推荐
唐大帅的编程之路
04-26 2万+
在编写移动web前端页面时,发现公司的原代码引用沉重杂乱,因此才找到了swiper这款强大的移动web前端js插件。下面就是在学习及使用过程中的碰到的问题和解决方法。。 html代码： <div class="swiper-container banner"> <div class="swiper-wrapper"> <div class="swipe
vue的同一个界面对同一个swiper 的多次引入
随身笔记
09-28 777
在swiper个数确认的情况下，比较简单，我就不再进行详细说明。之前开放时有在 一个界面同时使用动态个swiper,为了节约代码同时使多个swiper之间相互不受影响，所以使用了以下方法： 对所需要多次使用的swiper在data中进行设置，在watch中对数据进行动态监听，根据以下图示即可。 ...
vue-awesome-swiper的用法&同一页面有多个swiper如何使用
青梅煮码
06-07 1851
前言： swiper.js 的vue版api跟cdn引入事一样的api用法，共用官网那套api文档，此篇写下时，swiper.js 的版本是 Swiper4.x 。 这篇用的也是4.x的版本，注意swiper4.x跟swiper3.x的api用法有部分不同，详细请参考swiper官网。 用 npm 安装： npm install vue-awe...
Vue中swiper二次封装以后传入prop属性覆盖的问题
欢迎来到iceseasyh的博客
10-11 597
写小demo的时候，对于swiper进行了二次简单封装成一个组件。 但是在使用过程中，如果一个页面多次使用封装的swiper组件后，prop传入的属性会覆盖，比如前一个swiper初始化默认可见4个，后一个swiper初始化默认可见2个，但是复用组件以后都是可见2个。 示例 如图： 前一个swiper 后一个swiper 页面 代码 swiper.vue <template> <div class="my-swiper"> <div class="swiper
vue 一个页面多次使用同一个组件,传值问题
小姐姐
11-30 4556
a
swiper在vue项目中loop循环轮播失效的解决方法
01-19
长话短说，在vue(2.5.x)中使用swiper(4.3.3)，轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播； 那么可以这样写代码试试： this.$api.queryImages().then((resp) => { if(resp ...
swiper组件与ios的物理返回冲突问题解决办法
最新发布
weixin_56006480的博客
06-19 472
组件的左右滑动也会触发左滑手势，从而导致冲突。为了解决这个问题，你可以在。事件的监听，然后在事件处理函数中禁止左滑手势的默认行为。组件左滑手势的默认行为，以避免与 iOS 的左滑物理返回冲突。在 iOS 上，左滑手势会触发浏览器的返回操作，而。通过上述代码，你可以禁止。
Taro使用Swiper组件时会插入空的SwiperItem导致死循环
luckXXJ的博客
06-06 419
Taro使用Swiper组件时会插入空的SwiperItem导致死循环
一个页面使用多次swiper，相互冲突的问题，或接接口不循环的问题
swx999的博客
11-23 632
首先，可以用不同的 id 或 class 来区分他们，并设置样式 <template> <div> <!-- 第一个轮播 --> <div class="swiper-container" id="container1"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide1"> <i
微信小程序swiper组件常见问题及解决方法
醉逍遥neo的博客
07-16 9572
传送门：小程序swiper组件官方文档 整理微信小程序swiper组件使用中遇到的一些问题及其解决方法： 1、swiper轮播图图片高度自适应 描述： swiper组件有个默认高度150px，有时候做轮播图特效时要求图片高度能自适应，而不是写死的宽高。 解决方法： 首先给image标签设置mode=“widthFix”，然后绑定bindload事件，然后在事件方法里通过e.detail.width和e.detail.height获取图片宽高，获取swiper容器元素的宽度，计算出自适应后图片的高度，
解决swiper loop为true时slide数量较少时候会复制数据，重复显示问题
sunnyboysix的博客
09-27 6027
场景一 使用swiper时候需要loop轮播，但是如果数据较少的时候swiper会重复渲染数据， 我这里时切换形式，前面两个数量多可以loop但是第三个数据比较少就产生这个问题了 其实我的数据只有2条，但是却给我渲染了6条 我第一想法想通过v-if,设置两个组变量渲染，结果fail <swiper class="Swiper" :options="swiperOption" ref="mySwiper" v-if="currentBrandName != 'xxx'"> .
多个swiper在同一个页面使用
weixin_44707050的博客
02-11 1625
<div class="swiper-container swiper-container1"> <div class="swiper-wrapper"> <div class='swiper-slide' > 111 </div> </div> </div> //////////////////////////////////..
同一个页面 用2个swiper的2种情况
sjssjs12的博客
07-23 6779
第一种：2个swiper在同一页面（无选项卡）； 结构如下，每个'main-content'里都有一个‘swiper-container’。（对于swiper插件自带的class名，我们在引用swiper的时候不要修改，如果要对样式做修改或者添加新的js效果，可以添加新的类名或者id） 比如我的这两个swiper自定义了class名 ：'swiper1' 'swiper2' ...
Vue中多个子组件更新同一数据覆盖前一数据问题
m0_61135864的博客
10-25 2305
当我们在一个组件中 有多个子组件对同一接口 不同数据进行更改时 我遇到了 再更新最后一个组件 会把之前跟新的数据覆盖的情况 首先 是打开这一父组件时 三个子组件同时发送ajax请求 当我们在更新第一个子组件内容后 想切换到另一个子组件更新另外的内容时 第一个子组件修改后数据样子 修改第二个子组件的时候 我们修改了入职时间 但是我们跟改的名字又变回去了 这是因为我们在打开父组件时 他们同时发送请求获取数据 当我们...
vue项目在一个页面循环使用swiper3插件，导致多个插件互相影响要怎么解决
05-28
在 Vue 项目中使用多个 Swiper 插件可能会导致它们之间互相影响的问题，这是因为它们共享了一些全局变量和事件，导致冲突。为了避免这种情况，你可以使用 Swiper 的 `destroy()` 方法来销毁每个 Swiper 实例，然后再重新初始化。 在 Vue 中，你可以在组件的 `beforeDestroy()` 生命周期钩子中调用 `destroy()` 方法来销毁 Swiper 实例。这样可以确保在组件销毁之前，所有的 Swiper 实例都被正确地销毁了。同时，在组件的 `mounted()` 生命周期钩子中，你可以重新初始化 Swiper 实例。 以下是一个示例代码： ```vue <template> <div> <div ref="swiper1" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <div ref="swiper2" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> </div> </template> <script> import Swiper from 'swiper'; export default { mounted() { // 初始化 Swiper 实例 this.initSwiper(); }, beforeDestroy() { // 销毁 Swiper 实例 this.destroySwiper(); }, methods: { initSwiper() { // 初始化 Swiper 实例 this.swiper1 = new Swiper(this.$refs.swiper1, {/* options */}); this.swiper2 = new Swiper(this.$refs.swiper2, {/* options */}); }, destroySwiper() { // 销毁 Swiper 实例 this.swiper1.destroy(); this.swiper2.destroy(); } } } </script> ``` 在这个示例中，我们在组件的 `mounted()` 生命周期钩子中初始化了两个 Swiper 实例，并在 `beforeDestroy()` 生命周期钩子中销毁了它们。这样可以确保在组件销毁之前，所有的 Swiper 实例都被正确地销毁了。在实际使用中，你可以根据需要添加更多的 Swiper 实例，并在相应的生命周期钩子中进行初始化和销毁。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌一一

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值