說明

> 最近一直在搗鼓Nuxt.js項目，項目中有個需求是實現類似探探左右滑動切換功能。要求能實現手指拖拽切換、點擊按鈕進行切換、拖拽回彈等功能。

如上圖：最終展示效果

emmm~~ 是不是感覺還闊以。下面就來簡單的講解下實現過程。

布局

整體布局分為 頂部topbar、卡片滑動區、底部tabbar 三個部分。

遇見TA

側邊欄篩選框

點擊右上角按鈕，側邊會出現彈窗。范圍滑塊、switch開關、Rate評分等組件則是使用Vant組件庫。

范圍

{{distanceVal}}

自動增加范圍

性別

女生

好評度

{{starVal}}星

優先在線用戶

優先新用戶

更新

Vue仿陌陌堆疊卡片

其中卡片堆疊區單獨封裝了一個flipcard.vue組件，只需傳入pages數據就可以。

``

在卡片的四周拖拽卡片，會出現不同程度的斜切視角。

pages支持傳入的參數

module.exports = [

{

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

name: '放蕩不羈愛自由',

sex: 'female',

age: 23,

starsign: '天秤座',

distance: '藝術/健身',

photos: [...],

sign: '交個朋友，非誠勿擾'

},

...

]

堆疊卡片模板

• {{item.name}}

  {{item.age}}

  {{item.starsign}}

  {{item.distance}}

/**

* @Desc Vue仿探探|Tinder卡片滑動FlipCard

* @Time andy by 2020-10-06

* @About Q：282310962 wx：xy190310

*/

還有點擊卡片會直接跳轉到詳情頁。

ok，基于Vue.js實現卡片拖拽切換效果就分享到這里。希望能喜歡~~💪

總結

以上是生活随笔為你收集整理的vue实现卡片式上下滑动_基于Vue.js仿制探探卡片左右滑动特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。