设计滑屏框架的办法一般有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>

DEMO

移动端框架篇-控制父容器的滑屏框架-slip.js的更多相关文章

  1. 移动端框架篇-控制子容器的滑屏框架-fullPage.js

    控制子容器法 方法是只显示其中一个子元素,其它隐藏,滑屏时隐藏当前元素,并显示当前元素的下一个同辈元素~ 这里采用fullPage框架,库大小7.69K~ fullPage框架的页面样式无需自定义,已 ...

  2. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  3. 小程序多端框架全面测评：chameleon、Taro、uni-app、mpvue、WePY

    摘要: 微信小程序开发技巧. 作者:coldsnap 原文:小程序多端框架全面测评 Fundebug经授权转载,版权归原作者所有. 最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一 ...

  4. Spring - 父容器与子容器

    一.Spring容器(父容器) 1.Mapper代理对象 2.Service对象 二.Springmvc(前端控制器)(子容器)        Controller对象 1.标准的配置是这样的:Con ...

  5. Go游戏服务端框架从零搭建（一）— 架构设计

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居海边. 本教程以Go语言分区游戏服务端框架搭建为例. Go语言是Google开发的一种静态强类型.编译型.并发型.具有垃圾回收功能的编程语言.语法上近似C语 ...

  6. 父容器利用opacity设置透明后，子元素跟着变透明的解决方案

    背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...

  7. 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

       html css <div class="register-wrapper"> <div class="register"> &l ...

  8. IE9父容器overflow:auto时，子容器状态更改导致滚动条下出现额外空间的问题探讨

    IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; ove ...

  9. 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

随机推荐

  1. ActionBar修改字体颜色

    style: <resources xmlns:android="http://schemas.android.com/apk/res/android"> <!- ...

  2. UNIX文件的权限之“设置用户ID位”

    用stat函数可以获取一个文件的状态信息,原型是这样的: int stat(const char *path, struct stat *buf); 其中结构体stat的结构: struct stat ...

  3. 云与备份之（1）：VMware虚机备份和恢复

    本系列文章会介绍云与备份之间的关系,包括: (1)VMware 虚机备份和恢复 (2)KVM 虚机备份和恢复 (3)云与备份 (4)OpenStack 与备份 (5)公有云与备份 1. 与备份有关的V ...

  4. 在Azure上实现Linux Server故障转移

    要充分利用公有云的弹性扩展和高可用, 首先要在应用系统层面支持横向扩展(scale out),这个说起来很容易,或者说对新开发的应用系统而言已经成为标配.但是对已有的.老旧的应用系统来说,这就比较困难 ...

  5. Caffe源码解析5：Conv_Layer

    转载请注明出处,楼燚(yì)航的blog,http://home.cnblogs.com/louyihang-loves-baiyan/ Vision_layer里面主要是包括了一些关于一些视觉上的操 ...

  6. 360：且用且珍惜！解决虚拟机linux启动缓慢以及ssh端卡顿的问题！

    优化软件以及杀毒软件想必大家都是用过的,小编自用的第一台电脑自带安装的是金山毒霸,随着时间的偏移渐渐用过小红伞,卡巴斯基,优化大师,鲁大师到后来的360优化杀毒套装,优化软件给大家带来了方便,尤其是上 ...

  7. java环境变量详细配置步骤

    1 下载jdk. a 官网:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 本来 ...

  8. vuejs mvvm图解

  9. Convert Sorted List to Binary Search Tree

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  10. 使用axis2 soapmonitor监控soap数据

    Using the SOAP Monitor SOAPMonitor使用 使用SOAPMonitor axis2开发笔记-消息监控 WebService大讲堂之Axis2(10):使用soapmoni ...