H5W3
当前位置:H5W3 > 其他技术问题 > 正文

请问大佬:VUE使用swiper轮播,分页器和图片不同步

vue有使用Swiper做 轮播 ,但是退出组件再进组件发生

图片分页器不同步的情况,以及手动滑动图片在动,但分页器没动;类似以下图例。
clipboard.png

这是轮播组件

swiper(){
            var mySwiper = new Swiper ('.swiper-container-rotation', {
                  on:{
                    touchMove: function(event){
                          this.params.speed = 300;//滑动时切换时间300ms
                    },
                    slideChangeTransitionEnd: function(){
                          this.params.speed = 2500;//滑动切换结束时触发切换时间2500ms
                    },
                  },
                  direction: 'horizontal', 
                  loop: true, // 循环模式选项
                  autoplay: {
                    delay: 1500,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                  },
                  speed:2500,
                  initialSlide: 0,
                  // 如果需要分页器
                  pagination: {
                    el:'.swiper-pagination',
                    clickable :true,
                  },
            })    
          },    

这是父组件调用

this.$nextTick(()=>{

  this.$refs.rotation.swiper();
  this.$refs.classification.swiper_class();
})

这是界面图(分类也是用的轮播方式)

clipboard.png

回答:

之前写了缓存,数据在activated这个钩子,每次进入组件都会请求,请求回调后会再调用Swper,导致本来缓存中又执行一次
swiper
现在放在beforMount的钩子就不会每次进入组件就重复调用
(考虑轮播图和导航不会经常变动所有不会太担心数据更新不及时)

clipboard.png

回答:

Vue中的swiper你用Vue-awesome-swiper

本文地址:H5W3 » 请问大佬:VUE使用swiper轮播,分页器和图片不同步

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址