记录一个深坑，swiper第一次加载无法滑动的问题

最新推荐文章于 2024-07-14 19:24:31 发布
最新推荐文章于 2024-07-14 19:24:31 发布
阅读量686 收藏
点赞数
分类专栏： 插件 文章标签： swiper bug

多次使用swiper插件，不管是vue或者h5页面，都会遇到swiper第一次加载无法滑动的问题，后面多次查找，监听了一下touchMove事件，console一下结果却出现这个玩意：PointerEvent

baidu了一下，这是一个整合鼠标、触摸 和触控笔事件的Api，估计swiper还不支持。火狐上测试ok，于是我翻查一下谷歌游览器的实验选项，

chrome://flags/

果不其然被我发现一个选项，打开这个选项后就正常了。估计不打开这个选项，就会使用Pointer Event Api，打开就是Touch Event Api

burning__33
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用swiper页面不滑动，swiper中的js不生效的问题解决
吴文静的博客
05-19 3479
如何在vue中使用swiper插件 1、前言 今天用vue3.0写项目的时候，想要用swiper插件做轮播。其实之前我也用过，也遇到这个问题，但是我记性不好，就把这个关键的问题又忘记啦，今天又遇到这个坑，所以打算记录一下，以免自己以后又忘记。 我们在vue中使用swiper的时候，一定要用setTimeout来初始化swiper组件。这也是我们经常遇到的一个坑。如果用的轮播比较简单，其实elementUI里面自带的走马灯也是不错的选择。 2 、安装方法 // 使用指令安装 npm i swiper@3.4.
vue swiper循环播放无效解决
weixin_42835782的博客
10-28 931
因为swiper内容是动态的，初始化时没有数据， 所以加上observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper,两行代码 还需要在swiper上写个v-if判断有数据后才显示轮播图 <swiper :options="storySwiperOption" v-if='detailData.pictures'> <swiper-slide class='f
Swiper无法滑动
balidui8328的博客
07-04 488
初始化时候获取需要加载多少图片 var mySwiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, longSwipesRatio: 0.3, touchRatio: 1, ...
解决swiper首次加载不轮播的问题
qq_41621896的博客
12-16 4889
解决swiper首次加载不轮播的问题 这两天利用swiper做轮播图遇到了数据动态首次加载成功后轮播图不自动轮播的问题， 查了一些其他的教程说改一下谷歌浏览器的配置就好了，这对程序猿而言很不严谨 初始化的配置的轮播代码如下： 页面代码如下 <swiper ref="mySwiper" :options="swiper_opt_station" @setTransition="setTransition" > <swiper-slide class="swiper-slide"
【无标题】解决swiper初始化过早引起的轮播图不能滑动的问题
qq_45752177的博客
01-09 839
问题产生的原因： swiper初始化时部分元素还没有加载，导致swiper中的某些功能没有绑定到元素上； 解决方法： swiper中有一个observer属性，在observe:true时，当我们修改swiper的子元素时，会自动初始化swiper，并该指令一般情况下搭配 observeParents:true,一起使用 即当Swiper的父元素变化时，会更新swiper。 以下为示例代码： new Swiper(".mySwiper_1", { effect: "coverflow",
swiper滑动失效问题
qq_38179746的博客
02-28 1447
最近在写移动端的项目，页面有用的是swiper滑动的。 但是会发现在滑动时，不灵活，就是滑动时隐藏的数据会显示，但是不滑动数据又在初始那，隐藏的数据还是看不到。 于是各种排除问题，终于在pc端+移动端完美解决了问题 问题出在初始化的时候放在html文件了，应该放在接口取值后找到swiper-wrapper类后马上初始化！ $.ajax({ type: "get", ...
swiper 切换内部slide 仅仅首次加载正常，修改图片时出现bug（原生js）
qq_52959875的博客
12-28 553
swiper 修改图片
swiper 解决动态加载数据滑动失效的问题
01-19
1、数据加载后进行swiper初始化 success:function(result){ var resultdata =eval((+result+)); if(resultdata.status == 1){ var dataList = resultdata.data; currentPage = resultdata.currentPage; ...
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
10-17
例如，可以使用一个标志变量来控制swiper的显示状态。在数据请求开始时，将标志设为`false`，数据加载完成后，再将标志设回`true`，同时初始化swiper。这样可以避免在数据未准备好时显示轮播图。 ```javascript // ...
详解Vue.js使用Swiper.js在iOS11时出现错误
11-30
前言 swiper这是一个很强大的轮播展示工具，但往往也会有一些未知BUG，尤其是在手机端，由于性能局限，会导致效果和PC测试的时候有完全不一样的效果 在H5项目中，需要用到翻页效果，通过 Swiper 来实现，安装 Swiper npm i swiper -S 但是实际使用中，发现低版本 iOS < 11 会出现下面这个错误： SyntaxError: Unexpected keyword ‘const’. Const declarations are not supported in strict mode. 原因 Swiper.js 这个 npm 包里面还使用了 dom7
Swiper.js实现移动端元素左右滑动
01-21
swiper.js也是一个很好用的移动端的js库。 需要引入它的css文件和js文件。用法很简单，加入相应的类即可，看一下Demo，很容易看懂。 我的例子如下： <!DOCTYPE html> <html lang=en> <head> <...
移动端H5页面左右滑动并加载分页 dropload+swiper
04-19
其次，`swiper` 是一个强大的触摸滑动库，尤其适用于移动端H5页面。它可以实现幻灯片切换、轮播图、网格切换等多种布局效果，支持横竖向滑动，同时提供了丰富的动画效果和手势控制。在商品类目展示场景下，我们可以...
uni-app swiper数量过多时卡顿优化方案
weixin_38946164的博客
02-16 8848
当源数组长度是12的时候，效果图如下：当源数组长度是11的时候，需要追加1张空白页，效果图如下：当源数组长度是13的时候，需要追加2张空白页，效果图如下：源码下载地址：链接：https://pan.baidu.com/s/1AVB71AjEX06wpc4wbcV_tQ?pwd=l9zp提取码：l9zp。...
解决swiper刚打开无法滑动问题
yumengQAQ的博客
04-26 667
observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper 在初始化时加入这两行代码
Swiper(滑动不了）
weixin_46061574的博客
04-16 4996
大概是想浅试一下swiper所以写了一个大概是这样的一个滑动效果 state中放了一个list分别为111，222，333，滑动时应该在这三者之间进行滑动效果写完之后，我的效果完成不了，搜索一下原因，大概的解决方法为以下几种： a、在使用上图结构时，添加静态数据可以使用Swiper的所有功能，但在动态的向swiper-wrapper中添加swiper-slide时，Swiper的自动轮播和左右滑动功能就会失效。也就是说Swiper不能用了。 后来看了下官网文档然后认真理了下项目的思路，发现应该是同步
Swiper轮播点击图片无反应bug修复
weixin_43999603的博客
06-09 529
Swiper 轮播点击无反应，第一张图片点击无反应，点击没有效果，点击bug
学习分布式事务遇到的小bug
最新发布
qq_73440769的博客
07-14 460
出现报错：module java.base does not "opens java.lang" to unnamed module @5c90e579。
swiper动态加载数据后无法滑动问题
08-31
swiper动态加载数据后无法滑动问题可能是由于以下几个原因导致的： 1. 数据加载时机问题：可能是在数据加载完成之前就尝试滑动swiper导致的。解决方法是在数据加载完成之后再初始化swiper，确保数据加载完毕后再进行相应的滑动操作。 2. 元素尺寸计算问题：如果动态加载的数据导致swiper容器的尺寸发生变化，可能会影响到swiper的滑动功能。解决方法是在数据加载完成后，重新计算swiper容器的尺寸，并调用swiper.update()方法进行更新。 3. 事件绑定问题：动态加载数据后，可能需要重新绑定一些事件，以便能够正确地响应用户的滑动操作。解决方法是在数据加载完成后，重新绑定swiper相关的滑动事件。 4. 其他问题：如果以上方法都无法解决问题，可能是由于其他未知的原因导致的。可以尝试使用浏览器的开发者工具进行调试，查看是否有相关的报错信息，根据报错信息进行进一步的排查和修复。 总之，解决swiper动态加载数据后无法滑动问题需要确保加载数据的时机正确、处理元素尺寸变化、重新绑定事件等，以确保swiper正常工作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值