js微信小程序一组卡片翻转功能

js微信小程序一组卡片翻转功能

wxml中的信息

<view class='main' wx:for="{{cardList}}" wx:key="index">
  <!--正面的框 -->
  <view class="box b1" animation="{{animationMain}}" bindtap='flipCard'   data-id="{{item.id}}" data-index="{{index}}" >
   <image src=""></image>
  </view>
  <!--背面的框 -->
  <view class="box b2" animation="{{animationBack}}" bindtap='flipCard'  data-id="{{item.id}}" data-index="{{index}}">
   <image src=""></image>
  </view>
</view>

css中的信息

.main {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 300px;
 height: 300px;
 transform: translate(-50%,-50%);
 -webkit-perspective: 1500;//子元素获得透视效果
 -moz-perspective: 1500;
}

.box {
 position: absolute;
 top: 0;
 left: 0;
 width: 300px;
 height: 300px;
 transition: all 1s;
 backface-visibility: hidden;
 border-radius: 10px;
 cursor: pointer;
}
.box image{
 border-radius: 10px;
 width: 100%;
 height: 100%;
}
.b1{
 background:skyblue;
}
.b2 {
 background:tomato;
 transform: rotateY(-180deg);
}

//给卡片数组增加参数  
      cardata[i].animationMain = null  //正面
      cardata[i].animationBack = null; //反面
      cardata[i].switch = false;  //添加一个状态  根据状态判断是哪一面

  //卡片翻转
  flipCard(e) {
    var id = e.currentTarget.dataset.id  //在页面点击获取对应卡片的id值
    var index = e.currentTarget.dataset.index  
    var cardList = this.data.cardList;  //卡片对应数组
    for (let i = 0; i < cardList.length;i++){
      if (cardList[i].id === id){   //循环数组比较两个id是否相等
        cardList[index].switch = !cardList[index].switch;//如果相等则取反
      }
      else{
        cardList[i].switch =false;//否则保持原样
      }
    }
    this.data.cardList=cardList;  /将此数组重新赋值
    // console.log(this.data.cardList.map(item => item.switch))
    for (let i = 0; i < cardList.length; i++) {
      cardList[i].animation_main = wx.createAnimation({    定义正面动画
        duration: 400,
        timingFunction: 'linear'
      })
      cardList[i].animation_back = wx.createAnimation({     定义反面动画
        duration: 400,
        timingFunction: 'linear'
      })
        // 点击正面
      if (cardList[i].switch) {
        cardList[i].animation_main.rotateY(180).step();
        cardList[i].animation_back.rotateY(0).step();
        cardList[i].animationMain = cardList[i].animation_main.export();
        cardList[i].animationBack = cardList[i].animation_back.export();
      }
      // 点击背面
      else {
        cardList[i].animation_main.rotateY(0).step();
        cardList[i].animation_back.rotateY(-180).step();
        cardList[i].animationMain = cardList[i].animation_main.export();
        cardList[i].animationBack = cardList[i].animation_back.export();
      }
      this.setData({cardList});

    }

  },