淘宝小程序实现翻牌器

acss

  .single-demo {
    margin: 50rpx auto;
    padding: 30rpx;
    text-align: center;
    border: solid 1px #999;
  }

  .flip {
    display: inline-block;
    position: relative;
    width: 60rpx;
    height: 100rpx;
    line-height: 100rpx;
    border: solid 1px #000;
    border-radius: 10rpx;
    background: #fff;
    font-size: 66rpx;
    color: #fff;
    box-shadow: 0 0 6rpx rgba(0, 0, 0, .5);
    text-align: center;
    /* font-family: "Helvetica Neue" */
  }

  .flip .digital:before, .flip .digital:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background: #000;
    overflow: hidden;
    box-sizing: border-box;
  }

  .flip .digital:before {
    top: 0;
    bottom: 50%;
    border-radius: 10rpx 10rpx 0 0;
    border-bottom: solid 1px #666;
  }

  .flip .digital:after {
    top: 50%;
    bottom: 0;
    border-radius: 0 0 10rpx 10rpx;
    line-height: 0;
  }

  /*向下翻*/

  .flip.down .front:before {
    z-index: 3;
  }

  .flip.down .back:after {
    z-index: 2;
    transform-origin: 50% 0%;
    transform: perspective(160rpx) rotateX(180deg);
  }

  .flip.down .front:after, .flip.down .back:before {
    z-index: 1;
  }

  .flip.down.go .front:before {
    transform-origin: 50% 100%;
    animation: frontFlipDown 0.6s ease-in-out both;
    box-shadow: 0 -2rpx 6rpx rgba(255, 255, 255, 0.3);
    backface-visibility: hidden;
  }

  .flip.down.go .back:after {
    animation: backFlipDown 0.6s ease-in-out both;
  }

  /*向上翻*/

  .flip.up .front:after {
    z-index: 3;
  }

  .flip.up .back:before {
    z-index: 2;
    transform-origin: 50% 100%;
    transform: perspective(160rpx) rotateX(-180deg);
  }

  .flip.up .front:before, .flip.up .back:after {
    z-index: 1;
  }

  .flip.up.go .front:after {
    transform-origin: 50% 0;
    animation: frontFlipUp 0.6s ease-in-out both;
    box-shadow: 0 2rpx 6rpx rgba(255, 255, 255, 0.3);
    backface-visibility: hidden;
  }

  .flip.up.go .back:before {
    animation: backFlipUp 0.6s ease-in-out both;
  }

  @keyframes frontFlipDown {
    0% {
      transform: perspective(160rpx) rotateX(0deg);
    }
    100% {
      transform: perspective(160rpx) rotateX(-180deg);
    }
  }

  @keyframes backFlipDown {
    0% {
      transform: perspective(160rpx) rotateX(180deg);
    }
    100% {
      transform: perspective(160rpx) rotateX(0deg);
    }
  }

  @keyframes frontFlipUp {
    0% {
      transform: perspective(160rpx) rotateX(0deg);
    }
    100% {
      transform: perspective(160rpx) rotateX(180deg);
    }
  }

  @keyframes backFlipUp {
    0% {
      transform: perspective(160rpx) rotateX(-180deg);
    }
    100% {
      transform: perspective(160rpx) rotateX(0deg);
    }
  }

  .flip .number0:before, .flip .number0:after {
    content: "0";
  }

  .flip .number1:before, .flip .number1:after {
    content: "1";
  }

  .flip .number2:before, .flip .number2:after {
    content: "2";
  }

  .flip .number3:before, .flip .number3:after {
    content: "3";
  }

  .flip .number4:before, .flip .number4:after {
    content: "4";
  }

  .flip .number5:before, .flip .number5:after {
    content: "5";
  }

  .flip .number6:before, .flip .number6:after {
    content: "6";
  }

  .flip .number7:before, .flip .number7:after {
    content: "7";
  }

  .flip .number8:before, .flip .number8:after {
    content: "8";
  }

  .flip .number9:before, .flip .number9:after {
    content: "9";
  }

  .clock {
    text-align: center;
    margin-bottom: 200rpx;
  }

axml

<view style="width:714rpx;height:1190rpx;border-radius:24rpx;background-color:#ddd;">
  <view class="single-demo">
    <view class="{{direction}}" id="flip" style="display: flex;justify-content: center;align-items: center;">
      <view class="digital front number{{count}}" style="display: flex;justify-content: center;align-items: center;"></view>
      <view class="digital back number{{nextCount}}" style="display: flex;justify-content: center;align-items: center;"></view>
    </view>
    <view class="btn-con">
      <button id="btn1" onTap="flipDown">向下翻+1</button>
      <button id="btn2" onTap="flipUp">向上翻-1</button>
    </view>
  </view>
</view>

js

import { enhanceComponent } from 'tb-shop-enhance';

Component(enhanceComponent({
  data: {
    count: 0,
    // 是否正在翻转（防止翻转未结束就进行下一次翻转）
    isFlipping: false,
    nextCount: 0,
    direction: 'flip down',
    autoplay: 2,
  },

  onInit() {
    // mock数据需要修改client文件夹中的page文件
    // 正常运行过程中模块总是默认传入data参数
  },

  didMount() {
    // 加载成功后可以异步获取数据更新数据展示，例如请求接口等操作
    const { gdc = {}, mds = {}, modUtils } = this.props.data;

    this.setData({
      bannerArray: mds.moduleData.banner_array,
    });
    if (this.data.autoplay == 1) {
      this.time = setInterval(() => {
        this.flipDown()
      }, 1000)
    } else {
      clearInterval(this.time)
    }
  },

  methods: {
    click(e) {
      console.log(e)
    },
    // 向下翻转+1
    flipDown() {
      let self = this
      if (self.data.isFlipping) {
        return false
      }
      var nextCount = self.data.count >= 9 ? 0 : (self.data.count + 1)
      self.setData({
        isFlipping: true,
        direction: 'flip down go',
        nextCount: nextCount,
      })
      setTimeout(function () {
        self.setData({
          isFlipping: false,
          count: self.data.nextCount,
          direction: 'flip down',
        })
      }, 1000)
    },
    // 向上翻转-1（同理，注释略）
    flipUp() {
      let self = this
      if (self.data.isFlipping) {
        return false
      }
      var nextCount = self.data.count <= 0 ? 9 : (self.data.count - 1)
      console.log(nextCount)
      self.setData({
        isFlipping: true,
        direction: 'flip up go',
        nextCount: nextCount,
      })
      setTimeout(function () {
        self.setData({
          isFlipping: false,
          count: nextCount,
          direction: 'flip up'
        })
      }, 1000)
    }
  }
}));