swiper 在turn.js不能滚动

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

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

假设这个是第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>

我们绑定对应的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的值

<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',},})}}
}

swiper 在turn.js不能滚动相关推荐

从一个页面跳转到用swiper写的全屏滚动页面的指定位置
问题背景从一个页面跳转到用swiper写的全屏滚动页面的指定位置,怎么实现啊? 案例我没有自己写一个全屏滚动,就在Swiper官网找了Swiper在PC端的全屏页面效果展示若有侵权请留言告知我更 ...
vue引入turn.js
github地址: https://github.com/blasten/turn.js (1) 首先要全局引入jquery 这里我们使用vue-cli3 搭建的项目,所以使用链式引入 vue.con ...
JS实现滚动监听以及滑动到顶部
效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
js平滑滚动到顶部,底部,指定地方 animate()
采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. 滚动到顶部: $(' ...
html缩放惯性,js带滚动惯性的视觉差特效插件
luxy.js一款js带滚动惯性的视觉差特效插件.该插件可以在页面中制作图片HTML内容滚动视觉差特效,并且在页面滚动时,带有惯性效果,非常炫酷. 安装可以通过npm来安装luxy.js插件. np ...
turn.js学习手册
因为最近用到turn来做一个比赛,所以学习了一下,但是现在没有中文的API文档,所以就自己整理了一下 1.flipbook的部署 1)引入jquery以及turn的js库 2)写入Html <d ...

swiper 在turn.js不能滚动

swiper 在turn.js不能滚动相关推荐

最新文章

热门文章