Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

想请教一下小程序swiper组件的问题 #3

Open
tangniyuqi opened this issue Jan 27, 2019 · 16 comments

Comments

@tangniyuqi
Copy link

commented Jan 27, 2019

体验了一下您的小程序,很流畅没有卡顿,点个赞!
目前我也在做小程序开发用到swiper组件,滑着滑着就卡顿,甚至不动了。
请问您是怎么解决这个问题的呢?看了一下您的代码,没看出门道。

@LeachZhou

This comment has been minimized.

Copy link
Owner

commented Jan 28, 2019

感谢关注,其实我的小程序在低端机上滑动的话目前还是会有一点点卡顿的,之后的优化我有方案,但是忙着没写,来说说具体的解决方案吧。

1.swiper的每一项里面的元素不能太多,原本我每个里面的元素是图片+日期标签+标题标签+作者标签,每个里面有4个,一旦加载100+图的时候,就会很卡,所以我把日期标签作者拿出来了,只留图片。

2.控制swiper里面项的数量,比如你获取到了100张图及信息数据,你不能一下子加载出来,你需要将一部分比如5个渲染到页面上去。剩余的保存到主数组中,然后滑动一次,将数据动态加载上去一部分(5个)。具体里面的current可能会改变的饿问题,视情况而定。(目前这个优化我还没加上去,你有时间也可以提前试试,理论上如果成功,应该什么机型都不会卡了)

3.做了一个卡死判断,当卡死的时候,swiper的页数会变成0.具体请看,index.js的animationfinish方法。这个方法你遇到不能解决的方法的时候加到上面去,bindanimationfinish在swiper卡死的时候也会触发<swiper bindanimationfinish="animationfinish">,可参考 这里

@tangniyuqi

This comment has been minimized.

Copy link
Author

commented Jan 28, 2019

感谢!我试试您说的方法。

@tangniyuqi

This comment has been minimized.

Copy link
Author

commented Jan 28, 2019

之前我是在swiperChange的时候判断的 似乎没怎么作用,试试您说的bindanimationfinis

@tangniyuqi

This comment has been minimized.

Copy link
Author

commented Jan 28, 2019

之前的做法是数据是每次只加载一条,当animationfinish的时候再去加载下一条,也测试过当数据大于10条就移除数组最前面的一个元素,current然后减1,但是会闪烁,体验非常不好。

@tangniyuqi

This comment has been minimized.

Copy link
Author

commented Jan 28, 2019

用这样写,滑动的时候老回到第一张图去,很奇怪。

animationfinish (e) {
if (e.mp.detail.source === 'touch') {
if (e.mp.detail.current === 0) {
this.swiperError += 1;

      if (this.swiperError >= 3) {
        console.error(this.swiperError);
        this.goodsIndex = this.preIndex;
        this.swiperError = 0;
      }
    } else {
      this.preIndex = e.mp.detail.current;
      this.swiperError = 0;
    }
  }
}
@LeachZhou

This comment has been minimized.

Copy link
Owner

commented Jan 28, 2019

@tangniyuqi 逻辑应该是有问题的

@tangniyuqi

This comment has been minimized.

Copy link
Author

commented Jan 28, 2019

@LeachZhou 这里逻辑似乎没问题呀,看上去很简单。

@tangniyuqi

This comment has been minimized.

Copy link
Author

commented Jan 28, 2019

老兄可以加个微信吗

@LeachZhou

This comment has been minimized.

Copy link
Owner

commented Jan 29, 2019

@tangniyuqi MTE3ODUzOTM0NQ==

@LeachZhou LeachZhou closed this Mar 7, 2019

@xiaomizhou66

This comment has been minimized.

Copy link

commented Mar 30, 2019

bindanimationfinish在swiper卡死的时候也会触发,可参考 这里

参考这里之后错误卡顿来的更强烈了

@xiaomizhou66

This comment has been minimized.

Copy link

commented Mar 30, 2019

rr

@LeachZhou

This comment has been minimized.

Copy link
Owner

commented Mar 30, 2019

@xiaomizhou66 你这个是你代码的问题了,不是参考我这里就能解决的问题,给你个链接吧https://blog.csdn.net/jian_xi/article/details/77600139

@futurehu

This comment has been minimized.

Copy link

commented Mar 31, 2019

您好 我最近也遇到类似问题 主要是item中的节点过多 导致渲染慢 和卡顿问题。现在只能控制swiper-item的数量才不会卡顿。您的第二种理论方案 能不能请教一下

@LeachZhou LeachZhou reopened this Apr 1, 2019

@LeachZhou

This comment has been minimized.

Copy link
Owner

commented Apr 1, 2019

@futurehu 我试了一下,动态添加item不会引起刷新,所以可行,给你个思路吧,分三个数组,一个是总数组,用来存储可以加到item里的数据,一个是已经滑过item的数组,用来存上一页的东西,一个是当前显示的item数组,用来存你想显示的部分,通过 bindanimationfinish 滑动来判断current是否是左滑还是右滑,根据相应的操作来进行数组增删,例如左滑,将总数组第一个移动到当前显示item数组最后一个,将当前显示item数组第一个移动到已经滑过item数组最后一个,反之亦然

@LeachZhou

This comment has been minimized.

Copy link
Owner

commented Apr 8, 2019

还有一个方案,在小程序官方社区里面看到的,通过wx.createIntersectionObserver()来监测当前页面中显示元素, 使用二维数组分页之后, 可以控制只让当前显示页来使用 swiper 来轮播, 其他已经翻过去的页面都可以设置为组图中的单张图片(或者直接设置成空白占位). 这样可以保证基本上只有一个 pageSize 页面中含有 swiper(最多两个页面, 在翻页交界过程中监测都在当前屏幕中显示), 能大大减少卡顿.

@futurehu

This comment has been minimized.

Copy link

commented Apr 8, 2019

谢谢大佬提供思路

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.