這個問題，使用turn.js的同學(xué)一定遇到過，那怎么解決呢？

答案： 翻到對應(yīng)包含swiper 的那頁，重新初始化swiper

假設(shè)這個是第3頁

<div class="page-container flipbook" id="magazine"><divv-for="(n, index) in 9":key="`phone_${index}`":class="`page${index}`"class="page"><component :is="`Page${index}`" :current="currentPage"> </component></div></div>

我們綁定對應(yīng)的currentPage，代表當(dāng)前翻到第幾頁

$('#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 //獲取翻到當(dāng)前第幾頁console.log(page, 'page')},},})

然后在第三頁里面監(jiān)聽current的值

<div class="swiper-wrap"><div class="swiper-container"><div class="swiper-wrapper"><divclass="swiper-slide"v-for="(item, index) of swiperData":key="`three_${index}`"><a :href="item.url"><img :src="item.imgSrc" alt="" /></a></div></div><div class="swiper-pagination"></div></div> 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',},})}} }

總結(jié)

以上是生活随笔為你收集整理的swiper 在turn.js不能滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。