微信小程序卡片

1.1 效果 左右滑动

1.2 代码

<view class="container">
  <swiper autoplay interval="4000" circular indicator-dots>
    <block wx:for="{{itemList}}" wx:key="index">
      <swiper-item>
        <view class="content" style="{{item.backgroundColor}}">
          <text class="item-text">{{item.title}}</text>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

//wxss
.container {
  height: 200rpx;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200rpx;
}

.item-text {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200rpx;
  margin: 0;
}

//js
Page({
  data: {
    itemList: [
      { title: '1', backgroundColor: 'background-color: #d3dce6;' },
      { title: '2', backgroundColor: 'background-color: #99a9bf;' },
      { title: '3', backgroundColor: 'background-color: #d3dce6;' },
      { title: '4', backgroundColor: 'background-color: #99a9bf;' },
      { title: '5', backgroundColor: 'background-color: #d3dce6;' },
      { title: '6', backgroundColor: 'background-color: #99a9bf;' },
    ]
  }
})

2.1 效果 上下滑动

2.2 代码

<swiper class="swiper-container" vertical="{{true}}" indicator-dots="{{false}}" duration="{{500}}" circular="{{true}}" current="{{current}}">
  <block wx:for="{{cardList}}" wx:key="index">
    <swiper-item class="swiper-item">
      <view class="card" style="{{cardStyle(index)}}" style="background-color: {{item.color}}">
        {{item.name}}
      </view>
    </swiper-item>
  </block>
</swiper>

//wxss
.swiper-container {
  height: 300px; /* 设置容器高度 */
}

.swiper-item {
  height: 100%; /* 设置每个卡片的高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  /* 设置卡片的样式 */
  width: 80%;
  height: 80px;
  background-color: #fff;
  border-radius: 5px;
  margin: 5px;
  transition: all 0.3s ease;
}

.card-selected {
  width: 100%;
  height: 120px;
}

.card-small {
  width: 60%;
  height: 60px;
}

//js
Page({
  data: {
    cardList: [
      { name: '卡片1', color: '#FF0000' },
      { name: '卡片2', color: '#00FF00' },
      { name: '卡片3', color: '#0000FF' },
      // 添加更多卡片...
    ],
    current: 0
  },
  onLoad: function () {
    this.setData({
      current: Math.floor(this.data.cardList.length / 2) - 1 // 初始显示中间一张卡片
    });
  },
  cardStyle: function (index) {
    if (index === this.data.current) {
      return "card card-selected";
    } else if (index === this.data.current - 1 || index === this.data.current + 1) {
      return "card card-small";
    } else {
      return "card";
    }
  }
})