基于Vue.js仿探探/Tinder卡片滑動
最近一直在學習NuxtJs項目，有個需求是實現(xiàn)類似探探卡片左右滑動切換功能。要求實現(xiàn)左滑unlike | 右滑like、點擊按鈕左右進行切換及拖拽動畫回彈等功能
效果圖
最終實現(xiàn)的效果就是上圖這樣，是不是感覺還不錯！
整體布局
頁面布局分為?頂部導航欄、堆疊區(qū)域、底部標簽欄?三個模塊
<!-- //卡片頁面模板 -->
<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>
側(cè)邊彈窗
點擊頁面篩選按鈕，側(cè)邊彈出窗口。里面的范圍滑塊、switch開關(guān)、Rate評分等組件則是使用Vant組件庫實現(xiàn)功能。
vue.js實現(xiàn)卡片滑動
為了頁面代碼規(guī)范，卡片堆疊區(qū)域單獨封裝了一個組件，只需傳入pages數(shù)據(jù)就可以。
<flipcard ref="stack" :pages="stackList"></flipcard>
手指在卡片的四周拖拽時會出現(xiàn)不同的斜切視角。
pages支持傳入?yún)?shù)
module.exports = [
? ? {
? ? ? ? avatar: '/assets/img/avatar02.jpg',
? ? ? ? name: '放蕩不羈愛自由',
? ? ? ? sex: 'female',
? ? ? ? age: 23,
? ? ? ? starsign: '天秤座',
? ? ? ? distance: '藝術(shù)/健身',
? ? ? ? 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端均可滑動。
點擊卡片跳轉(zhuǎn)到卡片詳細頁面。
okey，基于Nuxt模仿探探堆疊滑動效果就分享到這里。希望能喜歡~~ ?
