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

时间:2024-01-15 13:10:32

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
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的问题)(此问题需要后期验证完善)

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