swiper 在turn.js不能滚动

我会带着你远行 2023-02-10 08:20 159阅读 0赞

这个问题，使用turn.js的同学一定遇到过，那怎么解决呢？

**答案：** 翻到对应包含swiper 的那页，重新初始化swiper

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

假设这个是第3页

我们绑定对应的currentPage，代表当前翻到第几页

$('#magazine').turn({ 
         width: 750,
         height: 961,
         elevation: 50,
         display: 'single',
         gradients: true,
         autoCenter: true,
         duration: 800,
         acceleration: true,
         // zoom: 0.1,
         page: self.page,
         when: { 
           turned: function(e, page, view) { 
             self.currentPage = page  //获取翻到当前第几页
             console.log(page, 'page')
           },
         },
       })

然后在第三页里面监听current的值

export default { 
      props: { 
        current: { 
          type: Number,
          default: 1,
        },
      },
      watch: { 
        current: { 
          handler(new, old) {   //翻到了第三页
            if (new === 3) { 
              this.initSwiper()
            }
          },
          immediate: true,
        },
      },
       methods: { 
        initSwiper() { 
          new Swiper('.swiper-container', { 
            autoplay: { 
              delay: 2000,
              stopOnLastSlide: false,
              disableOnInteraction: false,
            },
            loop: true,
            keyboard: true,
            mousewheel: true,
            on: { 
              click: function() { 
                alert('click')
              },
            },
            pagination: { 
              el: '.swiper-pagination',
            },
          })
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520212043164.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70