本文将带你了解WEBAPP开发教程webapp滑屏框架相关，希望本文对大家学WEBAPP有所帮助。

现在很流行在H5页面滑屏的效果，特别是在微信浏览器窗口中，几乎很多推广的活动是使用到上下滑屏，一开始和前端的同事一起合作写滑屏效果花费了很多的时间，而且写出来的页面在浏览器的兼容上踩了很多坑，于是果断采用了框架。
    
    最初接触是使用iscroll4.js的框架，毕竟它是比较成熟的，用起来会让人觉得放心，可惜它在android2.3下滑屏效果兼容性不是很好，另外还有一个缺点是这个框架的有25K，为了一个滑屏的效果加载25K的代码是不划算的~
    
    后来找了2个比较简单的(轻量、少bug)，这里推荐给大家，有需要的同学不要错过。
    
    (有些同学会问：为什么不使用左右滑屏呢？原因之一是在微信浏览器中，向右滑动屏幕可能导致用户误操退出当前页面)
    
    下面给2个上下滑屏的例子~
    
    实例一，简单的上下滑屏
    
    
    
    实例二，简单的上下滑屏，滑动中附加了动画~
    
    
    
    设计滑屏框架的办法一般有2种
    控制父容器法控制子容器法控制父容器法
    
    通过控制父元素的transform: translateY或margin-top或top的值来上下滑动页面，每次的位移的取值为当前页面高度~
    
    
    
    这里采用slip框架，库大小5.75K，非常轻量，可以放心用在你的项目~
    
    slip框架的页面样式需要自定义，不过这里我简单写好了~
    
    (如果你不使用框架，推荐用transform:   translate(X,Y)的写法，首先transform:   translate可设计高性能动画，其次兼容android2.3+的系统，transform: translateY不兼容android2.3的系统)
    
    兼容ios5+、android2.3+系统，其滑屏功能，响应灵敏~如果你只需要设计简单的滑屏效果，可考虑它~
    
    slip框架更多详细的功能猛击这里https://github.com/binnng/slip.js
    
    代码：

    
    下载demo
控制子容器法
    
    方法是只显示其中一个子元素，其它隐藏，滑屏时隐藏当前元素，并显示当前元素的下一个同辈元素~
    
    
    
    这里采用fullPage框架，库大小7.69K~
    
    fullPage框架的页面样式无需自定义，已有写好的
    
    兼容ios5+、android2.3+系统，其滑屏功能，效果比较丰富，支持缩放、旋转、透明度、自动滑屏等动画效果~如果你需要设计精彩的滑屏效果，可考虑它~
    
    fullPage框架更多详细的功能猛击这里https://github.com/powy1993/fullpage
    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！