移动端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阅读 13,796评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,223评论 4 61
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    Zoemings阅读 6,553评论 0 12
  • 安装 minikube安装完毕了之后, 应该可以通过 minikube dashboard 来启动dashboar...
    LOC_Thomas阅读 2,308评论 1 0
  • 当你决定出发的那一刻,旅行最困难的部分已经结束了。 有时一个简单的决定,往往背后做出过无数次的思考和挣扎。对我...
    纯海阅读 357评论 0 11