【apicloud】解决swiper和下拉刷新事件冲突的方法

swiper用来做轮播等功能很强大，但是由于触发层级不同问题，会与apicloud提供的下拉刷新事件冲突，导致拖拉的时候卡壳，用户体验极差。

解决该问题的原理在于在监听swiper触发事件的时候通过setFrameAttr将页面的下拉刷新暂时性移除，当swiper释放时再重新开启下拉刷新。

此方法适用于大部分场景，类似问题可以同理解决。但若当前页面较为复杂或者当前测试手机机型较为老旧，在针对Js的处理上性能较差可能会导致效果较不理想。（基本适用于大部分场景）

代码奉上：

var swiper = new Swiper('.swiper-container', {
  spaceBetween: 0,
  centeredSlides: true,
  reverseDirection: true,
  spaceBetween: 20,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination'
  },
  on: {
    slideChangeTransitionEnd: function (e) {
      api.setFrameAttr({ bounces: true })
    },
    sliderMove: function (event) {
      api.setFrameAttr({ bounces: false })
    },
    touchEnd: function (event) {
      api.setFrameAttr({ bounces: true })
    },
  }
});

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 【apicloud】生成带二维码的图片，再通过微信分
• 下一篇： 【apicloud】侧滑删除列表模板