vue使用swiper遇到的一些坑分享

最新推荐文章于 2024-07-12 23:16:20 发布
最新推荐文章于 2024-07-12 23:16:20 发布
阅读量2.8w 收藏 5
点赞数
文章标签： vue-swiper 走马灯h5闪屏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fly_xinxin/article/details/78749800
版权
在Vue项目中使用Swiper实现卡牌翻转的走马灯效果时遇到了手机端卡屏和背景闪现的问题。通过调整swiper父层样式，使用fixed定位并设置全屏背景解决闪屏；对于swiper容器被横向拖拽，采用fixed定位并固定在屏幕中央以防止意外拖动。同时，注意到在Vue中使用箭头函数能保持`this`的正确指向。
摘要由CSDN通过智能技术生成

swiper这是一个很强大的轮播展示工具，但往往也会有一些未知BUG，尤其是在手机端，由于性能局限，会导致效果和PC测试的时候有完全不一样的效果，今天就帮踩一下。

犹豫项目需要做一个引导页的类似卡牌翻牌的走马灯效果

这里写图片描述
这里写图片描述
这里写图片描述

这个页面分两个部分
1.后面背景部分
2.swiper容器部分

导入swiper成功后遇到的坑===>
1

最低0.47元/天 解锁文章
凡诃_
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue使用swiper包指南及踩坑
qq_45963949的博客
09-03 1316
swiper使用指南: 安装swiper指定版本(最新版本使用方法与旧版本不同,目前网上的例子都是旧版本的,安装最新版本会报错): npm install swiper@5.3.6 --save 安装vue-awesome-swiper指定版本: npm install vue-awesome-swiper@4.0.4 --save 引入包和声明组件: import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/
在vue项目中使用swiper遇到的坑
javaScript_want的博客
06-03 1195
在vue项目中使用swiper自动轮播时次轮点击效果会失效 解决方案： 在vue的data中的swiper配置项swiperOption: {}中监听onclick事件，代码如下： data() { return { swiperOption: { pagination: { el: “.swiper-pagination”, clickable: true }, autoplay: { disa...
在vue项目中引入swiper进而出现的坑和处理
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
05-19 922
是给swiper设置observe，这个属性，可以告知swiper实例，当自身刷新的时候，可以初始化swiper，我看了半天的源码，希望找到到底是哪里出错了，但是没有找到，但是他可以走到init_swiper和swiper这两个文件，有兴趣的人可以自己去看看，到底为啥display 为 none 再到 block 的时候，会出现这个一些样式无法挂载到touchEnd等方法上，我也没有很清楚，但是确实很多效果都失效了。这个世界，总是会有意外发生的，尤其当你对老代码的复制特别自信的时候。
ArkTs布局入门08——轮播（Swiper）
harmonyClassRoom的博客
07-12 1342
Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。至此，我们已经了解了ArkTs的所有系统布局，“ArkTs布局入门”系列正式结束，未来，我们将逐步学习了解基本系统组件与系统动画，请持续关注。
vue swiper初始化不成功，几种解决方法
lt-ndsbycrwdjb
04-18 2996
1、 var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, observer:true //修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swi...
vue中使用swiper报错
qq_44246421的博客
07-11 1771
npm install swiper vue-awesome-swiper@3.4.2 --save-dev 可以在package.json进行查看，npm install swiper swiper@3.4.2 --save-dev swiper目录就出现了dist目录。然后在.vue文件里面这样配置 import { Swiper, SwiperSlide, directive } from ‘vue-awesome-swiper’ import ‘swiper/dist/css/swiper.css’
swiper在Vue中出现问题
Mr_pets的博客
05-19 890
swiper在Vue中出现问题 写在前面：这里遇到的问题是我自己遇到的，不代表有广泛性，所以，如果不是你的问题的解决之道，请勿喷！ 正文： 问题说明： Vue项目中用了一个swiper的轮播，动态加载后台返回的数据，加载页面正常，向左滑动也是正常，向右滑动整个页面就飞没有了。 //这是页面里面的swiper中内容 <div class="swiper-slide" v-for="item in topslide" :key="item.id"> <img :src="it
分享vue里swiper的一些坑
10-18
在使用Swiper时，开发者可能会遇到一些问题，本文将详细讲解如何在Vue中正确使用Swiper，以及如何解决常见的“坑”。 首先，我们来看第一个方法，即直接使用Swiper插件： 1. **安装**：通过npm命令`npm i swiper`...
vue使用swiper实现中间大两边小的轮播图效果
10-15
在本文中，我们将深入探讨如何使用Vue.js和Swiper库来创建一个特殊的轮播图，该轮播图具有中间图片放大而两侧图片缩小的效果。Vue.js是一个流行的前端框架，Swiper则是一个强大的滑动组件，适合构建轮播图、幻灯片和...
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
10-17
在使用Vue与swiper结合进行动态数据加载时，可能会遇到轮播图显示白屏的问题。这个问题通常出现在数据尚未完全加载或渲染之前，swiper就开始初始化并尝试显示轮播内容。以下是一些关键知识点和解决策略。 首先，...
vue使用swiper.js重叠轮播组建样式
10-16
标题中提到的“vue使用swiper.js重叠轮播组建样式”涉及的关键知识点主要包括如何在Vue项目中引入并使用Swiper.js库，以及如何调整Swiper.js的配置选项来实现一个垂直滚动且有重叠效果的轮播组件。 描述中强调了...
Vue3使用 swiper 详细总结 填坑分享
曈欣的博客
11-17 1234
使用 swiper 的时候，遇到了一些问题，通过这篇文章总结一下。报错：To install them, you can run: npm install --save swiper/css swiper/vue。左右切换按钮无效，分页Pagination不显示。vue单文件组件中无法修改swiper样式
Swiper 应用Vue遇到问题处理记录
热门推荐
Front end development engineer
01-19 2万+
Swiper 应用Vue遇到问题处理记录 最近在学习vue，在开发一个需求中发现了一个问题，轮播图图片在语言切换后不更新，解决过程做个记录，错误不足希望靓仔们指教，tank yo! 首先是在组件中引入common文件夹下不同语言下配置的共同的属性 const state = reactive({ imgs: { btnIcon: tc('message.btnIcon'), } }) 使用图片 <img class="center-icon" :src="imgs.b
vue-swiper报错
qq_41138596的博客
03-23 4595
Swiper is not defined没有加载js文件或位置错误下载文件包并在页面加载Swiper的js和css文件或使用Swiper的CDN服务加载文件Swiper的CDN服务如下：&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css"&gt;&lt...
vue项目引用swiper轮播图插件及报错解决
Hannah_Hannah_的博客
04-28 6204
1、下载插件（不建议下载最新的版本，因为vue2对最新的是wiper版本有不兼容） npm i swiper@6.8.1 --save 下载完成后会在package.json文件中出现： 2、进行基本配置 2.1在main.js中 import swiper from 'swiper' import 'swiper/swiper-bundle.css' Vue.config.productionTip = false new Vue({ router, store,.
vue项目中swiper动态更新后无法轮播问题 附带案例代码
码农笔录-微信公众号博客
03-08 1万+
swiper是很常用的一个组件，我项目中用到的版本是4.1.6。刚开始，我就按照官网的案例写了个demo，当然图片都是静态写死的，确实可以轮播了，但是我项目的需求是要动态修改轮播图的内容。然后我就改成vue的方式了，js和css是通过cdn引入的。下面是swiper的全部代码： 有问题请加群交流java群：200909980，vue群：128806068 ，或者在下边评论 vue tem...
vue和swiper冲突问题
徐向博
08-21 3879
VUE引入式开发环境中，使用swiper会出现swiper无法初始化的情况。具体原因只是知道了大概，还没确定，等空下来的时候研究一下。 解决方案：把swiper放到VUE钩子函数里面进行初始化。 var myApp = new Vue({ el: '#myDiv', data: { }, mounted(){ var mySw...
swiper在vue中使用的注意点
Joy_qxz的博客
06-14 3227
一、引入        直接在swiper官网下载相关的js, css文件，在index.html文件中使用script标签引入即可；二、使用        在生命周期mounted中直接new Swiper( )即可三、注意点        1. 有时我们使用swiper时会出现无法滑动的现象，主要原因可能是没有获取到dom元素,可以使用this.$nextTick( )或者加setTimeOu...
vue2引入swiper11
最新发布
08-07
Vue 2.x版本中引入Swiper 1.1版本主要是为了在项目中集成轮播组件，Swiper是一个流行的JavaScript滑动库，适用于响应式触摸设备。...如果需要使用较新的特性，可能会遇到一些问题，需要查阅文档或社区解决方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值