最近一直在学习NuxtJs项目，有个需求是实现类似探探卡片左右滑动切换功能。要求实现左滑unlike | 右滑like、点击按钮左右进行切换及拖拽动画回弹等功能

效果图

最终实现的效果就是上图这样，是不是感觉还不错！

整体布局

页面布局分为 顶部导航栏、堆叠区域、底部标签栏 三个模块

<!-- //卡片页面模板 -->

<template>

    <div>

        <!-- >>顶部 -->

        <header-bar :back="false" bgcolor="linear-gradient(to right, #00e0a1, #00a1ff)" fixed>

            <div slot="title"><i class="iconfont icon-like c-red"></i> <em class="ff-gg">遇见TA</em></div>

            <div slot="right" class="ml-30" @click="showFilter = true"><i class="iconfont icon-filter"></i></div>

        </header-bar>

        <!-- >>主页面 -->

        <div class="nuxt__scrollview scrolling flex1" ref="scrollview" style="background: linear-gradient(to right, #00e0a1, #00a1ff);">

            <div class="nt__flipcard">

                <div class="nt__stack-wrapper">

                    <flipcard ref="stack" :pages="stackList" @click="handleStackClicked"></flipcard>

                </div>

                <div class="nt__stack-control flexbox">

                    <button class="btn-ctrl prev" @click="handleStackPrev"><i class="iconfont icon-unlike "></i></button>

                    <button class="btn-ctrl next" @click="handleStackNext"><i class="iconfont icon-like "></i></button>

                </div>

            </div>

        </div>

        <!-- >>底部tabbar -->

        <tab-bar bgcolor="linear-gradient(to right, #00e0a1, #00a1ff)" color="#fff" />

    </div>

</template>

侧边弹窗

点击页面筛选按钮，侧边弹出窗口。里面的范围滑块、switch开关、Rate评分等组件则是使用Vant组件库实现功能。

vue.js实现卡片滑动

为了页面代码规范，卡片堆叠区域单独封装了一个组件，只需传入pages数据就可以。

<flipcard ref="stack" :pages="stackList"></flipcard>

手指在卡片的四周拖拽时会出现不同的斜切视角。

pages支持传入参数

module.exports = [

    {

        avatar: '/assets/img/avatar02.jpg',

        name: '放荡不羁爱自由',

        sex: 'female',

        age: 23,

        starsign: '天秤座',

        distance: '艺术/健身',

        photos: [...],

        sign: '交个朋友，非诚勿扰'

    },

]

卡片模板

<template>

    <ul class="stack">

        <li class="stack-item" v-for="(item, index) in pages" :key="index" :style="[transformIndex(index),transform(index)]"

            @touchmove.stop.capture="touchmove"

            @touchstart.stop.capture="touchstart"

            @touchend.stop.capture="touchend($event, index)"

            @touchcancel.stop.capture="touchend($event, index)"

            @mousedown.stop.capture.prevent="touchstart"

            @mouseup.stop.capture.prevent="touchend($event, index)"

            @mousemove.stop.capture.prevent="touchmove"

            @mouseout.stop.capture.prevent="touchend($event, index)"

            @webkit-transition-end="onTransitionEnd(index)"

            @transitionend="onTransitionEnd(index)"

        >

            <img :src="item.avatar" />

            <div class="stack-info">

                <h2 class="name">{{item.name}}</h2>

                <p class="tags">

                    <span class="sex" :class="item.sex"><i class="iconfont" :class="'icon-'+item.sex"></i> {{item.age}}</span>

                    <span class="xz">{{item.starsign}}</span>

                </p>

                <p class="distance">{{item.distance}}</p>

            </div>

        </li>

    </ul>

</template>

组件处理了touch和mouse事件，在移动端和PC端均可滑动。

点击卡片跳转到卡片详细页面。

okey，基于Nuxt模仿探探堆叠滑动效果就分享到这里。希望能喜欢~~ ✍