移动端Turn.js踩坑总结

在head中引入

坑一：一开始使用的jquery是3.x版本的，导致turning的过程中前一页的div定位在半屏的位置，溢出了窗口。（替换为1.7版本）。

script里面配置依赖文件

坑二：根据basic的示例，在yepnope配置里加了both:['css/basic.css'],在Chrome调试时，flipbook总是溢出窗口，查看basic.css文件后，果断摈弃。（懒）

.ctx与.page作用于同一容器

坑三：.page设置background-color可以设置翻页底色，默认为Transparent。

坑四：客户需求是超过一屏允许用户上下滑动，之前为防止页面滑动时上下抖动设置了touchmove事件监听：event.preventDefault();超过一屏高度时显示查看更多按钮下滑一屏距离并解锁滑动。在点击查看更多按钮时，错误使用event.stoppropagation();滑动卡顿。即使加上-webkit-overflow-scrolling: touch;也只稍微顺畅了一点点。（解决方案：设置当前.ctx{over-flow:auto}，虽然没有解决ios端页面抖抖抖，但滑动过程异常舒爽~）

Turn.js源码peel方法

坑五：peel——在网上很少说明，x,y相对应折角的角度、大小。在turned事件$(this).turn('peel','br');每一页默认显示右下折角。

---

acceleration: true 移动端必备属性点~~~

总结到此，暂时想不到更多！望指正！