[文章] 快速构建H5单页面切换骨架
来源:互联网 发布:阿里云设置端口映射 编辑:程序博客网 时间:2024/04/30 00:31
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用程序,应用中所有的视图都包含在这个HTML页面中,并通过JavaScript控制相关视图的显示和隐藏,这种模式可以让用户在Web App感受Native App的速度和流畅。本篇文章的目的就是教你如何来快速的构建一个H5单页面切换骨架。
一、 页面设计
在构建SPA应用时,首先要确定你的应用需要包含哪些视图,在这里,为了能够说明问题,我们只需要构建三个视图,即 首页、列表页面和列表详情页面。 这三个页面的逻辑关系是:
(1)程序启动,默认进入首页
(2)点击首页的按钮切换到列表页面
(3)点击列表页面的按钮切换到列表详情页面
(4)点击返回按钮或物理返回键能够回到上一页。
首先我们来看一下核心的HTML代码:
class=`pageview`的div容器所包含的就是一个独立的视图页面,在body中共有3个这样的div,需要注意的是,第2、3个div都设置了style=`display:none`,唯独第1个视图没有设置,这样做的目的就是让程序启动时默认显示首页。
在这段代码中,用一个通用的CSS类来描述每一个视图的样式以及切换效果,这个类就是`pageview`, 我们先看看pageview是如何定义的:
在这里,视图页面需要设置成绝对定位,并且和父容器等宽等高,这样视图才能够平滑的进行切换,另外还需要设置页面切换的过渡效果,我们使用CSS3的transition属性, 具体的参数就不在这里做过多的讲解了,大家应该都明白的。这个样式类所产生的效果是:当改变-webkit-transform的值时,页面会以样式中定义的过渡效果进行平移,持续时间是0.4s. 到此为止,主要的页面设计已经完成了。
二、逻辑控制
要实现页面切换,就要控制两个页面同时平移,即当前页面不断的离开屏幕,新的页面不断的进入屏幕。为了方便描述,我们把原来的页面叫做`currentView`,把新的页面叫做`applyView`,即申请进入的视图。如果用transform来描述的话,currentView 需要从原来的0% 平移到-100%,即页面向左平移了一个页面宽度的距离,与此同时,appyView需要从原来的100% 平移到0%,刚好占领currentView原来的位置,当然在平移之前,我们需要设置好currentView和applyView的初始位置,分别需要设置成0%和100%。
我们知道,通过JS操作就需要获取页面的DOM对象,为了减少DOM的查询,在页面加载时,我们将所有需要用到的页面对象一次性查询出来,并以键值对的形式存储到Map对象中,当需要使用时,只需要根据key来获取即可。
下面我们将通过JS来控制页面的切换效果:
在这里有一个重要的操作就是:一定要将设置最终位置的操作放到定时器中,即t1, 这是因为当页面被设置了初始位置后,需要一定的时间来`渲染`这个样式,第2个定时器是为了等待动画执行完毕后进行相关的操作,比如设置当前页面,设置hash,清除定时器等。当这段代码被执行时,页面就会以设定的效果进行平滑的移动,最终,当前页面被隐藏,新页面被设置为当前页面显示到屏幕中央,这样就完成了一次单页面切换效果。
三、支持物理键返回
既然是单页面切换,就不得不提另外一个问题,那就是物理返回键操作。其实,单页面切换只是页面的显示和隐藏操作,仅此而已,并不是真正意义上的hash跳转,而物理键返回实际上是监听浏览器的hash变化,因此为了让单页面能够支持物理键返回操作,我们需要模拟浏览器的hash变化,即当一个新页面进入时,给当前地址加上一个#hash 的标识,当点击物理返回键的时候,这个hash值会发生变化(回退到上一个hash),与此同时也会触发一个hashchange事件,当监听到hash变化时,我们就通过JS切换到上一个hash对应的页面,这样就实现了物理返回键的效果。
监听hash变化的处理:
0 0
- [文章] 快速构建H5单页面切换骨架
- H5单页面手势滑屏切换原理
- 基于zepto.js的移动端H5单页面跟随手指滑动切换控件pageSlider
- 构建单页面应用
- H5 单页面解决“前进”,“后退”功能
- 快速构建页面【组员参看】
- Maven命令构建项目骨架
- CMake构建系统的骨架
- angular.js构建单页面购物车
- knockout + require + director 构建单页面程序
- Angular路由实现单页面切换
- Angular路由实现单页面切换
- H5页面快速搭建之高级字体应用实践
- h5页面
- H5页面
- maven构建骨架慢(IDEA)
- Maven常用命令和自动构建目录骨架
- HTML5+CSS3构建同页面表单间的动画切换
- Mybatis实现数据的增删改查(CRUD)
- 线程池
- 设计模式学习笔记--代理模式
- Java系列笔记 - Java 内存区域和GC机制
- 去除qq右下角的新闻弹窗
- [文章] 快速构建H5单页面切换骨架
- 关于mybatis返回单一对象或对象列表的问题
- unity ui dll丢失
- python字符串操作方法大全
- DocumentsForiTerms2(转自: https://www.iterm2.com/)
- Android组件的背景设置
- SDWebImage: 带你制作精美的相册
- iOS Instruments 使用教程
- C#中的深复制和浅复制(在C#中克隆对象)