【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 })
    },
  }
});


翻滚的胖子博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论