移动端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 移动端必备属性点~~~

总结到此,暂时想不到更多!望指正!

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,881评论 1 87
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    Zoemings阅读 2,608评论 0 9
  • 安装 minikube安装完毕了之后, 应该可以通过 minikube dashboard 来启动dashboar...
    LOC_Thomas阅读 911评论 1 0
  • 当你决定出发的那一刻,旅行最困难的部分已经结束了。 有时一个简单的决定,往往背后做出过无数次的思考和挣扎。对我...
    纯海阅读 194评论 0 11
  • 今天是什么日子 起床:6:00 就寝:22:00 天气:阴 心情:一般 纪念日:无 任务清单 习惯养成:喝水,吃水...
    应非凡阅读 9评论 0 1