今天给小伙伴们分享一个超酷炸的Vue卡片滑动堆叠组件VueTinder。
vue-tinder 基于 vue.js 构建的类似 Tinder、探探 左右翻动卡片组件。拥有丝滑般的滑动效果，适合一些社交型项目应用。
支持撤回、左滑不喜欢、右滑喜欢、上滑关注等功能。大家也可以根据需要自行定制一些有创意的新功能。
安装
$ npm i vue-tinder -S
使用插件
<template>
<div id="app">
<Tinder ref="tinder" key-name="id" :queue.sync="imglist" :offset-y="10" @submit="onSubmit">
<template slot-scope="scope">
<div class="pic" :style="{'background-image': `url({scope.data.id})`}" />
</template>
<!-- 赞 -->
<img class="like-pointer" slot="like" src="./assets/like-txt.png">
<!-- 不 -->
<img class="nope-pointer" slot="nope" src="./assets/nope-txt.png">
<!-- 关注 -->
<img class="super-pointer" slot="super" src="./assets/super-txt.png">
<!-- 撤回 -->
<img class="rewind-pointer" slot="rewind" src="./assets/rewind-txt.png">
</Tinder>
<!-- 按钮操作区 -->
<div class="btns">
<img src="./assets/rewind.png" @click="decide('rewind')">
<img src="./assets/nope.png" @click="decide('nope')">
<img src="./assets/super-like.png" @click="decide('super')">
<img src="./assets/like.png" @click="decide('like')">
<img src="./assets/help.png" @click="decide('help')">
</div>
</div>
</template>
<script>
import Tinder from "vue-tinder";
export default {
components: { Tinder },
data: () => ({
imglist: [
{id: 'http://xx.imgcdn.com/1.jpg'},
{id: 'http://xx.imgcdn.com/2.jpg'},
{id: 'http://xx.imgcdn.com/3.jpg'},
{id: 'http://xx.imgcdn.com/4.jpg'},
{id: 'http://xx.imgcdn.com/5.jpg'},
...
],
history: []
}),
methods: {
onSubmit({ item }) {
this.history.push(item);
},
async decide(choice) {
if (choice === "rewind") {
if (this.history.length) {
this.$refs.tinder.rewind([this.history.pop()]);
}
} else if (choice === "help") {
console.log('help');
} else {
this.$refs.tinder.decide(choice);
}
}
}
};
</script>
右滑点赞
左滑不喜欢
上滑关注
撤回功能
so nice，如此炫酷的组件，大家可以动手试一试哈，千万不要错过！
最后附上在线预览及项目地址
# demo地址
https://by7qi.csb.app/
# 在线编辑预览
https://codesandbox.io/s/vue-tinder-preview-by7qi
# 仓库地址
https://github.com/shanlh/vue-tinder
好了，就分享到这里。希望对小伙伴们有所帮助，欢迎一起分享交流！
