uni-app 需要一个仿探探左右滑的卡片容器

发布于 1周前 作者 yuanlaile 来自 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 组件实现左右滑动,并通过按钮实现手动切换卡片。你可以根据需要进一步扩展这个示例,比如添加卡片删除、喜欢等功能。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!