设计滑屏框架的办法一般有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
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>slip</title> <style> *{padding: 0;margin: 0;} /*框架*/ .swipe-wrap{width: 100%;height: 100%;position: relative;overflow: hidden;} .swipe{position:absolute;width:100%;} .swipe-box{width: 100%;overflow: hidden;} </style> </head> <body> <div class="swipe-wrap" id="slip"> <article class="swipe"> <div class="swipe-box" style="background-color: gray;"> 第1屏 </div> <div class="swipe-box" style="background-color: green;"> 第2屏 </div> <div class="swipe-box" style="background-color: orange;"> 第3屏 </div> <div class="swipe-box" style="background-color: blue;"> 第4屏 </div> </article> </div> </body> <script type="text/javascript" src="js/slip.min.js"></script> <script type="text/javascript"> var container = document.getElementById(‘slip‘); var pages = document.querySelectorAll(‘.swipe-box‘); var slip = Slip(container, ‘y‘).webapp(pages); </script> </html>
时间: 2024-08-01 22:42:55