您的位置：首页 > Web前端 > HTML5

H5全屏滚动专题页最佳实践

2016-08-03 14:50 330 查看

1、slip.js + rem.js

主要插件：

slip.js

github： https://github.com/binnng/slip.js

rem.js

插件为阿里淘宝的 rem 实现的基础实现，源码在下方 dy_h5_template 项目内有单独的文件，在页面开头引入即可，需要配合预处理样式语言如 Less，Scss 使用

2、FullPage + pageResponse

实现方式


全屏滚动插件
背景铺满全屏，内容整体缩放


滑屏
FullPage
%EF%BC%88https://github.com/powy1993/fullpage]https://github.com/powy1993/fullpage
适配
pageResponse
http://peunzhang.cnblogs.com/
参考
H5单页面最佳实践http://winfredwyw.github.io/2016/06/03/H5%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/

踩过的坑

1、 fullpage.js


在华为的某款手机上出现过无法正常使用的情况


2、 audio


audio 原生的play和paused属性判断状态可能不准确，可以配合添加class来判断状态（可以解决大部分手机的问题）

音乐播放器在手机黑屏或是进入后台时无法停止播放（如果上一条使用正确，此问题在iphone下有可能会被解决，如果不可以，可以尝试使用第一种方案中王迪提供的watchDog，也只能解决iphone和safari的问题）（此问题需要后期验证完善）

部分手机的静音没办法控制音乐的暂停和播放，暂时无解

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航