美文网首页
移动端Turn.js踩坑总结

移动端Turn.js踩坑总结

作者: 进击的金城武 | 来源:发表于2019-02-19 01:46 被阅读0次
    在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 移动端必备属性点~~~

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

    相关文章

      网友评论

          本文标题:移动端Turn.js踩坑总结

          本文链接:https://www.haomeiwen.com/subject/vjiawftx.html