微信小程序案例-03翻页时钟-3

  • 开发
  • 60

微信小程序实战系列

文章目录

前言

本文继续完成最后一个部分“动态翻页效果”。

动态翻页效果实现

clock.wxml

<view class="container">
<view class="clock-container">
  <view class="flip-container">
    <block wx:for="{
    {timeArr}}" wx:for-item="unit" wx:for-index="unitIndex" wx:key="unitIndex">
      <view class="flip-items">
        <block wx:for="{
    {unit.max+1}}" wx:for-item="item" wx:for-index="index" wx:key="index">
          <view class="{
    {['item',(unit.current==index)?'current':'',(unit.current-1==index||index==unit.max&&unit.current==0)?'past':'']}}">
            <view class="up">
              <view class="inner">{
  {index}}</view>
              <view class="shadow"></view>
            </view>
            <view class="down">
              <view class="inner">{
  {index}}</view>
              <view class="shadow"></view>
            </view>
          </view>
        </block>
      </view>
    </block>
  </view>
</view>
</view>

clock.wxss

.flip-container {
   
  display: flex;
  justify-content: center;
  position: relative;
  padding: 0 20rpx;
}


.flip-items {
   
  position: relative;
  width: 90rpx;
  height: 145rpx;
  font-size: 128rpx;
  font-weight: bold;
  border-radius: 10rpx;
  border: 1rpx solid rgba(121, 121, 121, 0.384);
  box-shadow: 0 2rpx 18rpx rgba(0, 0, 0, 0.7);
}

.flip-container .flip-items:nth-of-type(2n+1) {
   
  margin-right: 12rpx;
}

.flip-container .flip-items:nth-of-type(2),
.flip-container .flip-items:nth-of-type(4) {
   
  margin-right: 36rpx;
}

.flip-container .flip-items:nth-of-type(2)::after,
.flip-container .flip-items:nth-of-type(4)::after,
.flip-container .flip-items:nth-of-type(2)::before,
.flip-container .flip-items:nth-of-type(4)::before {
   
  position: absolute;
  right: -18rpx;
  content: '';
  transform: translateX(50%);
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.7) 1px 1px 5px;
  background-color: rgba(0, 0, 0, 0.801);
}

.flip-container .flip-items:nth-of-type(2)::before,
.flip-container .flip-items:nth-of-type(4)::before {
   
  top: 25%;
}

.flip-container .flip-items:nth-of-type(2)::after,
.flip-container .flip-items:nth-of-type(4)::after {
   
  bottom: 25%;
}


.item {
   
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.item::before {
   
  position: absolute;
  content: '';
  top: 75rpx;
  width: 100%;
  height: 5rpx;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}

.flip-container .flip-items .item .up,
.flip-container .flip-items .item .down {
   
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
}

/* 设置transform的原点 */
.up {
   
  transform-origin: 50% 100%;
  top: 0;
}

/* 设置transform的原点 */
.flip-container .flip-items .item .down {
   
  transform-origin: 50% 0%;
  bottom: 0;
}

.flip-container .flip-items .item .inner {
   
  position: absolute;
  width: 100%;
  height: 145rpx;
  color: #252525;
  left: 0;
  line-height: 145rpx;
  text-align: center;
  text-shadow: 0 2rpx 4rpx rgb(0, 0, 0);
  border-radius: 10rpx;
  background-color: #55e3e3;
}

.flip-container .flip-items .item .up .inner {
   
  top: 0;
}

.flip-container .flip-items .item .down .inner {
   
  bottom: 0;
}

.flip-container .flip-items .item .up .shadow {
   
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
}

.flip-container .flip-items .item .down .shadow {
   
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
}

.flip-container .flip-items .item.past {
   
  z-index: 3;
}

/*  current time keep top z-index:4 */
.flip-container .flip-items .item.current {
   
  animation: highter-level 0.5s 0.5s linear forwards;
  z-index: 2;
}

/* 前一秒的上半页,旋转 0～-90deg */
.flip-container .flip-items .item.past .up {
   
  animation: flip-past-up 0.5s linear both;
}

/* 当前秒的下半页,旋转90～0 */
.flip-container .flip-items .item.current .down {
   
  animation: flip-current-down 0.5s 0.5s linear both;
}

@keyframes flip-current-down {
   
  from {
   
    transform: rotateX(90deg);
  }

  to {
   
    transform: rotateX(0deg);
  }
}
@keyframes flip-past-up {
   
  from {
   
    transform: rotateX(0deg);
  }

  to {
   
    transform: rotateX(-90deg);
  }
}

@keyframes highter-level {
   
  from {
   
    z-index: 4;
  }

  to {
   
    z-index: 4;
  }
}

.flip-container .flip-items .item .shadow {
   
  position: absolute;
  width: 100%;
  height: 100%;
}

/* show 渐变 */
.flip-container .flip-items .item.past .up .shadow {
   
  background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, #000 100%);
  animation: show 0.5s linear both;
}

/* show 渐变 */
.flip-container .flip-items .item.past .down .shadow {
   
  background: linear-gradient(#000 0%, rgba(0, 0, 0, 0.1) 100%);
  animation: show 0.5s linear both;
}

/* hide 渐变 */
 .flip-container .flip-items .item.current .up .shadow {
   
  background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, #000 100%);
  animation: hide 0.5s 0.3s linear both;
}

.flip-container .flip-items .item.current .down .shadow {
   
  background: linear-gradient(#000 0%, rgba(0, 0, 0, 0.1) 100%);
  animation: hide 0.5s 0.3s linear both;
}

@keyframes show {
   
  from {
   
    opacity: 0;
  }

  to {
   
    opacity: 1;
  }
}

@keyframes hide {
   
  from {
   
    opacity: 1;
  }

  to {
   
    opacity: 0;
  }
}

clock.js


Page({
   
  data: {
   

  },

  onLoad: function () {
   
   this.setTimeRunner()
  },

  setTimeRunner: function () {
   
    this.timeRunner = setInterval(() => {
   
      this.getTimeStr();
      this.getTimeArr();
    }, 1000);
  },

   getTimeStr: function () {
   
    let that = this;
    var time = new Date();
    var hour = ('0' + time.getHours()).slice(-2);
    var minute = ('0' + time.getMinutes()).slice(-2);
    var second = ('0' + time.getSeconds()).slice(-2);
    var timeStr = (hour + minute + second).split('');
    that.setData({
   timeStr:timeStr})
  },

    getTimeArr: function () {
   
      var timeArr = this.data.timeStr.map(function (element, index) {
   
        var max;
        if (index & 1 == 1) {
    
          max = 9;
        } else if (index == 0) {
    
          max = 2;
        } else if (index == 2) {
    
          max = 5;
        } else if (index == 4) {
    
          max = 5;
        }
        var current = Number(element)
        return {
   
          max: max,
          current: current
        };
      })
      this.setData({
   timeArr:timeArr})
    },

    beforeDestroy:function () {
   
      clearInterval(this.timeRunner);
    },
  onUnload: function () {
   
    this.beforeDestroy()
  }
})

运行效果

点击翻页时钟运行效果

总结

本项目的综合性较强，对wxss、wxml、js的综合运用需要较为熟悉，是一个非常好的练手小项目。

阅读全部

相关推荐

  1. 微信小程序案例-03翻页时钟-3

    2024-01-13 01:06:01       61 阅读

  10. 3 微信小程序

    2024-01-13 01:06:01       51 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-13 01:06:01       91 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-13 01:06:01       97 阅读

  9. 在Django里面运行非项目文件

    2024-01-13 01:06:01       78 阅读

  19. Python语言-面向对象

    2024-01-13 01:06:01       88 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-01-13 01:06:01       81 阅读

热门阅读

  1. expdp时报错ORA-31693&ORA-02354&ORA-01555

    2024-01-13 01:06:01       52 阅读

  7. 【web安全】弱口令，以及不同领域的弱口令爆破

    2024-01-13 01:06:01       63 阅读

  15. autox.js嘎嘎牛p的悬浮窗模板

    2024-01-13 01:06:01       58 阅读

  17. 4 微信小程序

    2024-01-13 01:06:01       55 阅读

  20. 深入理解区间合并：让数字之间的故事更加有序

    2024-01-13 01:06:01       53 阅读

  21. linux系统nginx工具的一些应用

    2024-01-13 01:06:01       55 阅读

  22. nodejs中响应头写在createServer中和使用server实例监听‘request‘的区别和应用场景

    2024-01-13 01:06:01       54 阅读

  26. C# 快速模指数运算 快速求余运算

    2024-01-13 01:06:01       57 阅读

  27. Linux中关于文件权限详解

    2024-01-13 01:06:01       56 阅读

  29. checkpoint存的是参数还是模型?

    2024-01-13 01:06:01       54 阅读