vue页面滑动切换效果(slide效果切换)

最近碰到一个需求,单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样,让这个页面在切换时感觉是一个页面。反复琢磨的vue里面的transition,最终将实现的核心代码贴出来。这里实现的是上下切换,左右的效果类似。

核心代码如下(App.vue):

注:这里使用了vue-touch组件来监听swipe事件

最重要的就是transition的样式:

 

 

页面生成图片dom-to-image,html2canvas(dom转图片)

  • 在传统的H5页面,将dom生成对应的图片

使用到两个第三方库:Android下(dom-to-image),IPhone(html2canvas)

使用方法也很简单,先进行dom-to-image转换,失败的情况进行html2canvas转换,转换的base64结果(这是其中一种形式的结果,还可以转换blob等,大家可以查阅官方文档)

  • 在vue里面怎么做?

我尝试在vue的各个事件钩子里面去获取dom然后进行生成图片的操作,但是都有dom丢失和样式不全的情况。即便是在updated里面进行截图。因为我的需求是,进入页面以后就进行生成图片,这样才能保证用户在微信里面打开网页时,可以长按当前页面弹出保存图片的窗口。(原理就是,会生成一张图片覆盖在当前页面,给用户的感觉还是一个页面,长按时实际就是长按在图片上了)

 

最终的办法:setTimeout,等待页面完全渲染结束,再从dom生成png替换

 

  • 如果是在一般浏览器里面打开,要提供下载图片的功能,也很容易:创建一个a标签,download属性,然后click下就行了
  • 跨域问题解决

我处理的办法是把远程图片的url转成base64编码,具体我是通过node做了一个中间层,核心代码(基于axios)如下:

目前H5页面调起app的方式小结

最近遇到需要在H5网页调起app的需求,查阅资料以后,得到如下方式(intent,scheme,iframe,applink),由于我们只考虑Android的,所以这里木有写iphone的。我实践以后发现,只需要两种方式就可以覆盖大部分浏览器。

  • a标签href到scheme
  • window.location.href

 

1.实现的逻辑是这样:

2.测试的浏览器如下

 

认识几个新的长度单位(vh,vw,vmin,vmax)

vh,vw,vmin,vmax这些单位都是viewport下的单位,首先搂一眼兼容性

兼容还不错,忽略operamini,可以放心使用了

vh:1vh相对于viewport的高度的1%,100vh=100%viewport高度,用这个有个很方便的地方,有时我们需要在移动端设置一个div高度(height:100%),着需要额外设置html,body为100%,才能实现效果。 比较繁琐,借用这个单位一步到位(height:100vh)that’s enough!

同理可以使用vw表示viewport宽度的1%

vmin和vmax取viewport宽度和高度中的最小值得1%

小伙伴们,试试吧!

各种width和height傻傻分不清楚(width,clientWidth,scrollWidth,offsetWidth,innerWidth,outerWidth)

width:内容宽度(标准盒模型),怪异盒模型下包含了border,padding

 

clientWidth:包含内容和padding的宽度

继续阅读“各种width和height傻傻分不清楚(width,clientWidth,scrollWidth,offsetWidth,innerWidth,outerWidth)”

flex实现水平垂直居中效果及其它方式

这里实现一个带有遮罩层,垂直水平居中图片的效果,无论浏览器窗口如何调节都能居中显示。应用CSS3的flex属性版本如下:

<body>
 <div>Hello</div>
 <div class="wrap">
 <div class="div1"><img src="img/1.jpg" alt=""></div>
 </div>
</body>

继续阅读“flex实现水平垂直居中效果及其它方式”

less快速入门

前端的世界出了很多框架和工具,其实冷静的想想,思维方式与后端大同小异,less的出现为了提高写css的效率。其实如果没有less,我相信也会有人去弄一个类似的工具来提高开发效率。nodejs的出现让,npm的丰富,出现了很多工具,不要被这些工具的表象迷惑。有过服务器端开发经验的人都知道,思路就是那些,基本也成了套路。当然这些东西仍然有学习的必要,因为已经有很多人在用了,圈子成熟。不用重复造轮子。今天我借助less官网学习less,快速入门下,希望给路过的人一点点帮助。 继续阅读“less快速入门”

高效CSS3动画或transition避免reflow

CSS3提供了3D变换的属性,让我们可以操作网页内容在一个3维的空间。并且这些被投射到3D空间的元素也可以使用transition,keyframe实现动画效果。3D变换当然需要浏览器的支持。3D变换中一个关键的属性:Perspective,可以指定给元素,也可以作为transform的属性。Perspective:使用CSS长度表示(px,em,rem等等),它定义了从viewport到3D元素的距离

继续阅读“高效CSS3动画或transition避免reflow”

纯CSS3动效

首先,什么是CSS3不能做的目前?(①不能控制滚动条scroll ②渐变没有动画效果)

使用原则:渐进式增强以及优雅的降级,因为在目前的浏览器环境下,对CSS3的支持有一些差异。不过相信这些差异随着时间的推移可以忽略。现在我们需要考虑如果浏览器不支持当前的CSS3特性,网站是否可以正常使用(所谓优雅降级)。这里记录一些常见的动效,并使用纯css实现。 继续阅读“纯CSS3动效”

嵌套Fixed定位元素,被嵌套的元素层级异常或失效

最近发现一个问题,Fixed定位元素嵌套会引发被嵌套的元素层级异常或失效。具体说明如下:

有这样一个布局:

<style>
.container4{width:100%;height:200px;background-color:cyan;position: fixed;z-index: 1;}
.container5{position: fixed;width:100%;height:100%;background: blue;z-index: 99;}
.container6{position: relative;width:100%;height:300px;background-color:rgba(100,0,100,1);z-index: 2;}
</style>
<div id="container4" class="container4">ddd
  <div id="container5" class="container5">eee</div>
</div>
<div id="container6" class="container6">fff</div>

继续阅读“嵌套Fixed定位元素,被嵌套的元素层级异常或失效”