uni-app 需要一个仿探探左右滑的卡片容器
uni-app 需要一个仿探探左右滑的卡片容器
仿探探左右滑卡片,可以定义卡片大小,示例:积目app
2 回复
在 uni-app
中实现一个仿探探(Tinder)风格的左右滑动卡片容器,可以通过使用 swiper
组件来实现。下面是一个基本的代码示例,展示了如何实现这一功能。
1. 模板部分(template)
<template>
<view class="container">
<swiper
class="swiper-container"
:autoplay="false"
:interval="0"
:duration="300"
current="{{currentIndex}}"
bindchange="onSwiperChange"
circular="false"
>
<swiper-item v-for="(card, index) in cards" :key="index" class="swiper-item">
<view class="card-content">
<image class="card-image" :src="card.image"></image>
<text class="card-text">{{card.text}}</text>
</view>
</swiper-item>
</swiper>
<button @click="prevCard" class="button prev" :disabled="currentIndex === 0">Prev</button>
<button @click="nextCard" class="button next" :disabled="currentIndex === cards.length - 1">Next</button>
</view>
</template>
2. 脚本部分(script)
<script>
export default {
data() {
return {
cards: [
{ image: 'path/to/image1.jpg', text: 'Card 1' },
{ image: 'path/to/image2.jpg', text: 'Card 2' },
{ image: 'path/to/image3.jpg', text: 'Card 3' },
],
currentIndex: 0,
};
},
methods: {
onSwiperChange(e) {
this.currentIndex = e.detail.current;
},
prevCard() {
if (this.currentIndex > 0) {
this.currentIndex -= 1;
}
},
nextCard() {
if (this.currentIndex < this.cards.length - 1) {
this.currentIndex += 1;
}
},
},
};
</script>
3. 样式部分(style)
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.swiper-container {
width: 80%;
height: 300px;
margin: 20px 0;
}
.swiper-item {
display: flex;
justify-content: center;
align-items: center;
}
.card-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-text {
margin-top: 10px;
font-size: 18px;
text-align: center;
}
.button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
}
</style>
这个示例展示了一个简单的卡片滑动组件,通过 swiper
组件实现左右滑动,并通过按钮实现手动切换卡片。你可以根据需要进一步扩展这个示例,比如添加卡片删除、喜欢等功能。