基于flipsnap框架,滑动页面的布局

简介:

基于上篇介绍的flipsnap框架,当滑动页面数为基数时页面该怎么布局呢?假如滑动页面数为3个,布局设计如下图所示1、2、3三个页面,向左拖动,页面2、页面3出现。

  此时页面可分三种设计方法:

    方法一:浮动方法。如果子元素为奇数,则子元素的宽度不精确,且子元素不能设置border,如果设置border,宽度就更不精确了。

    方法二:弹性布局方法。此方法也是是不错的选择。但经测试,如果页面中弹性布局运用的很多,在UC等浏览器上,非常卡。说明弹性布局非常耗性能。

    方法三:定位方法。此方法可解决方法一、二的缺点。注意:inner部分需设置高度,不然子元素会被隐藏,因为outer设置了overflow:hidden。

因此,此时采用方法三进行布局。代码如下:

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>滑动页面数为3个时</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*重置{*/
body,div{ padding:0;margin:0;} 
/*}重置*/
.html.body{width:100%;height:100%;}
.outer{width:100%;height:100%;overflow:hidden;margin-top: 40px;}        /*超出窗口部分隐藏*/
.inner > div:nth-child(1){background:#ff0;height:200px;}
.inner > div:nth-child(2){background:#0ff;height:200px;}
.inner > div:nth-child(3){background:#0f0;height:200px;}

/*方法一:浮动方法。如果子元素为奇数,则子元素的宽度不精确,且子元素不能设置border,如果设置border,宽度就更不精确了。*/
/*.inner{width:300%;}
.inner > div{float:left;width:33.33%;}*/

/*方法二:弹性布局方法。此方法也是是不错的选择。但经测试,如果页面中弹性布局运用的很多,在UC等浏览器上,非常卡。说明弹性布局非常耗性能。*/
/*.inner{display:-webkit-box;-webkit-box-orient:horizontal;}
.inner{width:300%;}
.inner > div{-webkit-box-flex: 1;}*/

/*方法三:定位方法。此方法可解决方法一、二的缺点。注意:inner部分需设置高度,不然子元素会被隐藏,因为outer设置了overflow:hidden;*/
.inner{width:100%;height:200px;position:relative;text-align: center;line-height: 200px;font-size: 80px;}
.inner > div:nth-child(1){position:absolute;left:0;right:0;}
.inner > div:nth-child(2){position:absolute;left:100%;right:-100%;}
.inner > div:nth-child(3){position:absolute;left:200%;right:-200%;}
</style> </head>
<body> <div class="outer"> <div class="inner"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <script src="flipsnap.js"></script>  <script type="text/javascript"> var flipsnap=Flipsnap('.inner') ; /*当横竖屏切换时,宽高度自适应屏幕*/ window.addEventListener("resize",function () { var fliwidth=document.querySelector('body').offsetWidth; flipsnap.distance=fliwidth; flipsnap.refresh(); },false); </script> </body> </html>
复制代码

 本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2012/10/31/2748896.html如需转载请自行联系原作者


@挨踢前端

相关文章
|
6月前
|
小程序 前端开发 容器
微信小程序隐藏右侧滚动条并可以滚动
微信小程序隐藏右侧滚动条并可以滚动
204 0
uniapp轮播图高度随变和左右滑动也获取高度
uniapp轮播图高度随变和左右滑动也获取高度
|
13天前
|
小程序
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
|
13天前
|
前端开发
Flutter笔记:光影动画按钮、滚动图标卡片组等
Flutter笔记:光影动画按钮、滚动图标卡片组等
43 0
|
13天前
|
前端开发 容器
如何实现一个两栏布局,右侧自适应?三栏布局中间自适应?
要实现一个两栏布局,右侧自适应的效果,可以使用 CSS 的 Flexbox 或 Grid 布局来实现。以下是使用 Flexbox 实现的示例:
36 1
|
13天前
|
测试技术 定位技术
【sgDragMoveTile】自定义组件:拖拽瓦片图、地图、大图,滚动条对应同步滚动
【sgDragMoveTile】自定义组件:拖拽瓦片图、地图、大图,滚动条对应同步滚动
|
13天前
[Qt5&布局] 控件自动填满所在布局框架
[Qt5&布局] 控件自动填满所在布局框架
48 0
[Qt5&布局] 控件自动填满所在布局框架
|
13天前
|
容器
Flutter 自定义实现时间轴、侧边进度条
时间轴和侧边进度条是非常常见的 UI 控件,它们可以增强应用的视觉效果和交互体验。在这篇文章中,我们将详细介绍如何使用 Flutter 自定义实现这两个控件。
117 1
|
7月前
14EasyUI 布局- 在面板中创建复杂布局
14EasyUI 布局- 在面板中创建复杂布局
18 0