微信小程序swiper组件卡死来回疯狂轮播

最新推荐文章于 2024-04-21 18:09:39 发布
最新推荐文章于 2024-04-21 18:09:39 发布
阅读量4.7k 收藏 5
点赞数 1
分类专栏： 前端 wepy 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39650528/article/details/84954035
版权
前端 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
wepy
5 篇文章 0 订阅
订阅专栏
微信小程序
4 篇文章 0 订阅
订阅专栏

设置current为bindchange事件触发的e.detail.current，发现长时间停留或者快速来回滚动的时候容易偶现导致

轮播图组件出错疯狂滚动，打印e.detail.current可以发现来回切换的速度非常快已经超过了设置的2000ms。

解决的办法是current赋值的index改由bindanimationfinish触发的e.detail.current

还有的是自己改造添加了一些东西需要同步当前滑块index值的，例如添加tab切换或者自己编写轮播图指示点的不建议

与swiper共用一个current值

系咩
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序滑动切换之swiper
weixin_45653441的博客
05-29 1745
小程序项目中遇到几个需要滑动切换效果，上来用的swiper组件 写了几行之后发现有的代码不见了，调试代码之后发现swiper高度问题导致的 ，swiper默认高度150 超出之后隐藏了查询之后发现sweiper无法设置动态高度，只能设置固定高度，百度了之后网上有几种方法，试过之后都不太好用 试过百度的2种方法： 1 在swiper之间嵌套scorll-view 这个需要先获取屏幕高度 用了之后发现不好使 弃用 2 在swiper-item 的内容部的前后加俩个空标签 来获取内容高度 实验之后发...
微信小程序swiper上下滑动卡顿
努力的nana
09-17 3200
效果：页面上下滑动，类似H5 当滑动的内容过多时，下方的内容会被遮盖，此时滑动会不流畅。 原因：内容的滑动和swiper的滑动有冲突 解决办法：在swiper-item中嵌套一个scroll-view // DOM <swiper class="swiper" :vertical="true" :current="currentTab" @change="handleChangeTab"> <swiper-item> <A/> </swiper-item
手把手带你学习微信小程序 —— 八 （swiper组件 轮播图的实现）
最新发布
afsdfrsg的博客
04-21 1214
机会是留给有准备的人，大家在求职之前应该要明确自己的态度，熟悉求职流程，做好充分的准备，把一些可预见的事情做好。对于应届毕业生来说，校招更适合你们，因为绝大部分都不会有工作经验，企业也不会有工作经验的需求。同时，你也不需要伪造高大上的实战经验，以此让自己的简历能够脱颖而出，反倒会让面试官有所怀疑。你在大学时期应该明确自己的发展方向，如果你在大一就确定你以后想成为Java工程师，那就不要花太多的时间去学习其他的技术语言，高数之类的，不如好好想着如何夯实Java基础。请转发本文支持一下。
vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题
m0_38075171的博客
08-24 3444
vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题 做项目的时候发现一个问题，在ios上切换很流畅，但是安卓手机就很卡顿，解决了半天，记录一下 功能：顶部有视频和图片的轮播图切换，无自动轮播，手动滑动切换 操作：发现视频与下一张图片切换时，视频的当前画面会卡顿 解决：触发滑动事件的时候，把视频标签隐藏，换成图片进行切换 具体代码 html <div class="mySwiper"> <swiper ref="mySwiper" style="hei
swiper的轮播超快速度切换
nunumaymax的博客
04-21 3908
项目场景： 移动端H5页面使用Swiper插件绘制轮播图 问题描述 使用Swiper插件时，轮播时间明明设置了3s，但是轮播速度超级快 ，1s都不到就要切换下一张图。 swiper初始化代码如下： new Swiper('.analysis-box', { autoplay: isOneMore ? { delay: 3000, disableOnInteraction: false } : false, loop:
微信小程序swiper轮播图卡死来回疯狂轮播
weixin_34233856的博客
01-11 1706
<swiper class="swiper" bindanimationfinish="animationChange" indicator-dots="true" indicator-color="{{indicatorColor}}" indicator-active-color='{{indicatorActiveColor}}' autoplay="{{autoplay}}" in...
微信小程序-swiper组件 轮播图
qq_30738155的博客
03-10 370
swiper组件 轮播图在wxml中加入swiper组件在wxss中设置swiper组件样式：图片消失的问题 在wxml中加入swiper组件 <view> <swiper> <swiper-item><image src="../../images/post/1.png"></image></swiper-item> <swiper-item><image src="../../images
微信小程序使用swiper组件实现层叠轮播图
10-17
主要为大家详细介绍了微信小程序使用swiper组件实现层叠轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 swiper 组件遇到的问题及解决方法
01-03
swiper 组件高度被限制为150px了，所以内容无法撑开。 解决办法 给这组件重新设置个高度，然后在把里面的图片设置为自动适应容器大小。图片模式设置为 宽度不变 自动适应高度 <swiper class=test> <swiper> &lt...
微信小程序 swiper 组件实现层叠轮播图，同时在轮播图中自定义信息
03-24
Swiper组件是微信小程序中用于创建滑动轮播效果的关键组件，适用于展示多张图片或者卡片信息。本文将详细介绍如何利用Swiper组件实现层叠轮播图，并自定义指示点样式以及图片描述信息。 首先，我们需要了解Swiper...
微信小程序swiper实现文字纵向轮播提示效果
12-28
小程序顶部总会看到滚动的通知栏，一般单条的都会用跑马灯去实现，但面对多条的内容，就需要用轮播去实现，轮播自然是swiper了，查了查，还真有vertical这个属性，swiper真好用。 效果 体验 代码 wxml ...
微信小程序swiper+scroll-view实现滑动切换内容
苏苏就是小苏苏的博客
02-27 7555
1.实现效果 2.实现原理 swiper：滑块视图容器。其中只可放置swiper-item组件，设置不同的swiper-item，通过bindchange事件，动态的改变当前选中项，swiper默认高度为150，必须设置相应高度才可。 scroll-view：包裹整个页面，设置scroll-x或scroll-y，改变滚动的方向。 3.实现代码 <scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scr
小程序android图片多变卡,【小程序】优化-解决swiper渲染很多图片时的卡顿
weixin_35035699的博客
05-27 893
相信各位在开发的时候应该有遇到这样一个场景，比如商品的图片浏览，有时图片的浏览会很大，多的时候达几百张或上千张，这样就需要swiper里需要很多swiper-item，如此一来渲染的时候就会很消耗性能，渲染时会有一大段的空白时间，有时还会造成卡顿，体验非常差，下面给大家介绍一下我的解决方案。首先是wxml结构：js：主要是利用current属性，swiper里面只放3个swiper-item，要显...
微信小程序swiper组件滑动卡死现象解决
热门推荐
梦幻般的菜鸟的博客
08-27 1万+
项目中用swiper作为滑动展示展品页面，swiper-item高达49个 在使用过程中出现了滑动卡死的现象，解决方案如下 在swiper里面监听bindanimationfinish事件 bindanimationfinish在swiper卡死的时候也会触发（神奇） &lt;swiper bindanimationfinish="changeGoodsSwip" current="{{...
微信小程序使用swiper组件滑动卡顿
ZZ556464的博客
04-06 1004
swiper-item上添加-webkit-overflow-scrolling: touch;
uniapp - 完美解决 ＜swiper＞ 嵌套 video 视频时卡顿不流畅问题，swiper滑块视图容器里面包含视频播放器和图片共存时滑动切换特别卡，滑动不流畅问题的解决方案（保证解决此问题）
高级前端工程师
10-14 4573
uniapp，uview，swiper滑块视图容器组件，swiper组件卡顿，swiper内嵌套包含视频video组件太卡不流畅，uniapp swiper里面有视频播放太卡怎么办，uniapp swiper里面包含视频没播放完就自动划走了，swiper里面的视频如何播放时禁止自动轮播滑动，在uniapp中使用swiper不流畅卡怎么办，uni-app swiper轮播图片加视频卡顿问题如何解决，uni-app nvue 小程序 H5 APP swiper做轮播图同时内嵌视频与图片卡顿，uniapp的swi
微信小程序swiper轮播快速滑动真机测试会出现卡顿的现象
qq_45832807的博客
08-05 2541
在bindchange的事件回调函数中改变currentIndex的值（当前所在滑块的索引），会导致setData 被不停的调用，所以在改变currentIndex的值之前检测source是否是由于用户触摸 引起的
swiper动态追加的slide无法滑动
Xiao_peng117的博客
12-24 3376
参考：https://blog.csdn.net/aiyishengyishi/article/details/53634659 原因：swiper初始化一次，如果追加了之后，但是初始化时记载了总共有多少个slide； 解决方法；每次追加后，重新初始化swiper 快捷初始化方法： 添加 observer:true, observeParents:true var swiper =...
记一次swiper数据多了页面卡顿的优化经历
小摩羯的博客
02-22 2730
数据量比较大，所以取了数据的当前展示的索引和前后各2个，这样渲染的dom也就是swiper-slide的数据就会急剧减少。
微信小程序swiper组件都底层逻辑是什么
06-07
微信小程序的swiper组件是一个轮播图组件，其底层逻辑主要包括以下几个部分： 1. 数据处理：swiper组件需要先获取数据并进行处理，包括图片、文字等内容的获取和布局处理。 2. 动画效果：swiper组件需要实现切换效果，包括滑动切换、淡入淡出、旋转等。 3. 事件处理：swiper组件需要处理用户的触摸事件，包括手指滑动、点击等，根据用户的操作进行切换。 4. 自动播放：swiper组件可以设置自动播放功能，需要实现自动轮播的逻辑。 5. 循环播放：swiper组件可以设置循环播放功能，需要实现循环切换的逻辑。 总的来说，swiper组件的底层逻辑主要包括数据处理、动画效果、事件处理、自动播放和循环播放等方面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值