效果图如下所示：
前言
嗨，说起探探想必各位程序汪都不陌生(毕竟妹子很多)，能在上面丝滑的翻牌子，探探的的堆叠滑动组件起到了关键的作用，下面就来看看如何用vue写一个探探的堆叠组件
一. 功能分析
简单使用下探探会发现，堆叠滑动的功能很简单，用一张图概括就是:
简单归纳下里面包含的基本功能点:
图片的堆叠
图片第一张的滑动
条件成功后的滑出，条件失败后的回弹
滑出后下一张图片堆叠到顶部
体验优化
根据触摸点的不同，滑动时首图有不同角度偏移
偏移面积判定是否成功滑出
二. 具体实现
有了归纳好的功能点，我们实现组件的思路会更清晰
1. 堆叠效果
堆叠图片效果在网上有大量的实例，实现的方法大同小异，主要通过在父层设定perspective 及perspective-origin ，来实现子层的透视，子层设定好translate3d Z轴数值即可模拟出堆叠效果，具体代码如下
// 图片堆叠dom <!--opacity: 0 隐藏我们不想看到的stack-item层级--> <!--z-index: -1 调整stack-item层级"--> <ul> <li><img src="https://www.jb51.net/article/1.png" alt="01"></li> <li><img src="https://www.jb51.net/article/2.png" alt="02"></li> <li><img src="https://www.jb51.net/article/3.png" alt="03"></li> <li><img src="https://www.jb51.net/article/4.png" alt="04"></li> <li><img src="https://www.jb51.net/article/5.png" alt="05"></li> </ul> <style> .stack { width: 100%; height: 100%; position: relative; perspective: 1000px; //子元素视距 perspective-origin: 50% 150%; //子元素透视位置 -webkit-perspective: 1000px; -webkit-perspective-origin: 50% 150%; margin: 0; padding: 0; } .stack-item{ background: #fff; height: 100%; width: 100%; border-radius: 4px; text-align: center; overflow: hidden; } .stack-item img { width: 100%; display: block; pointer-events: none; } </style>
上面只是一组静态代码，我们希望得到的是vue组件，所以需要先建立一个组件模板stack.vue，在模板中我们可以使用v-for，遍历出stack节点，使用:style 来修改各个item的style，代码如下
<template> <ul> <li v-for="(item, index) in pages" :style="[transform(index)]"> <img :src="item.src"> </li> </ul> </template> <script> export default { props: { // pages数据包含基础的图片数据 pages: { type: Array, default: [] } }, data () { return { // basicdata数据包含组件基本数据 basicdata: { currentPage: 0 // 默认首图的序列 }, // temporaryData数据包含组件临时数据 temporaryData: { opacity: 1, // 记录opacity zIndex: 10, // 记录zIndex visible: 3 // 记录默认显示堆叠数visible } } }, methods: { // 遍历样式 transform (index) { if (index >= this.basicdata.currentPage) { let style = {} let visible = this.temporaryData.visible let perIndex = index - this.basicdata.currentPage // visible可见数量前滑块的样式 if (index <= this.basicdata.currentPage + visible - 1) { style['opacity'] = '1' style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 60 + 'px' + ')' style['zIndex'] = visible - index + this.basicdata.currentPage style['transitionTimingFunction'] = 'ease' style['transitionDuration'] = 300 + 'ms' } else { style['zIndex'] = '-1' style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')' } return style } } } } </script>
关键点
:可以绑定对象的同时，也可以绑定数组和函数，这在遍历的时候很有用
最基本的dom结构已经构建完毕，下一步是让首张图片“动”起来
2. 图片滑动
图片滑动效果，在很多场景中都有出现，其原理无非是监听touchs事件，得到位移，再通过translate3D改变目标位移，因此我们要实现的步骤如下
对stack进行touchs事件的绑定
监听并储存手势位置变化的数值
改变首图css属性中translate3D的x，y值
#### 具体实现
在vue框架中，不建议直接操作节点，而是通过指令v-on对元素进行绑定，因此我们将绑定都写在v-for遍历里，通过index进行判断其是否是首图，再使用:style修改首页的样式，具体代码如下: