H5移动端开发总结

问题描述：遮罩层方案

底层透明，上层不透明
background: rgba(0,0.5); 采用rgba

问题描述：ios动画闪屏问题

问题描述:ios动画滚动导致transition失效，会导致滚动的时候动画一直闪烁
具体方案：
假如以上结构的多图左右移动查看， J-scroller是一块很大的动画移动层，我们对J-scroller设置了 translate3d(x,y,z) 以及transition 动画，此时iphone查看移动时会有闪屏现象，因为webkit是不会将J-scroller这么大的层整个分配存绘制渲染。这时候我们需要将滚动区域可视范围的列表项item元素缓存起来

.item{
   -webkit-transform: translate3d(0,0);
}

另外：当translate使用2d而非3d的呈现方式时，我们要设置当前动画移动元素的呈现方式为3d，它的所有子元素背面隐藏

.J-scroller{
   -webkit-transform-style: preserve-3d;
}
.J-scroller item{
   -webkit-backface-visibility: hidden;
}

问题描述：实现页面跳转后返回，位置不改变

具体描述：如果是组件内跳转，解决起来很方便，但是我在实际处理中，是文章页跳转，vue路由跳转带html外部资源文件。

情况一：组件间的条状
keep-alive组件，结合vue-router对页面进行缓存

   {
    path: '/',name: 'Hello',component: Hello,Meta: {
      keepAlive: false // 不需要缓存
    }
  },{
    path: '/page1',name: 'Page1',component: Page1,Meta: {
      keepAlive: true // 需要被缓存
    }
  }
 ]
})

情况二：vue路由跳转外部资源html文件
解决方案，使用iframe。由于我在开发中使用的是公共头，通过改变参数值判断当前页面是否打开了iframe，判断返回键应该关闭iframe页或者关闭外部页面。