微信小程序实战-03翻页时钟-3

这篇具有很好参考价值的文章主要介绍了微信小程序实战-03翻页时钟-3。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序实战系列

  • 《微信小程序实战-01翻页时钟-1》
  • 《微信小程序实战-02翻页时钟-2》

前言

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

动态翻页效果实现

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的综合运用需要较为熟悉,是一个非常好的练手小项目。文章来源地址https://www.toymoban.com/news/detail-800145.html

到了这里,关于微信小程序实战-03翻页时钟-3的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【实战】前端必会 —— 微信小程序 跳转 微信公众号

    web-view | 微信开放文档 跳转方案的选择关键在于目的性: 引流关注:直接跳转公众号页面 内容查看:使用 web-view 直接查看 biz 相当于微信公众号的 唯一身份标识 PC端随意打开一篇公众号文章,使用非微信内置浏览器打开, F12 ,network(网络),fetch/XHR 过滤,可以看到这些请

    2024年02月16日
    浏览(59)
  • 【实战】前端必会 —— 微信小程序引入背景图

    wxss中直接引用本地图片会报错: 使用本地图片的话,需要在行内样式中引用 ,外部wxss只能引用线上图片(需要上传服务器后引用) tips:数据量小的话这里建议使用小程序自带的云存储, 续费说明 | 微信开放文档 背景图片既可以直接在最外层view使用background,也可以在re

    2024年02月17日
    浏览(83)
  • 关于渗透实战中分析微信小程序前端代码的诸多问题

    Android版本和微信版本在7.0以上,不再信任用户安装的证书,只信任软件内置的证书,这样无法抓包。 开启代理(例如:fiddler)进行抓包,发现小程序页面加载不全,且无法抓到https的包。此方法行不通了。 使用夜神模拟器配合 burpsuite 进行抓包。夜神模拟器不一定要老版本

    2024年02月05日
    浏览(56)
  • 【实战】前端必会 —— 微信小程序右上角胶囊按钮(标题设置透明后的处理)

    Object wx.getMenuButtonBoundingClientRect() | 微信开放文档 Object wx.getSystemInfoSync() | 微信开放文档 微信小程序右上角的胶囊按钮在正常情况下(正常设置 navigationBarTitleText)没有影响 但是标题部分设置透明(“navigationStyle”: “custom”,)后,问题就出现了 我这边的需求是在最顶部增加

    2024年02月11日
    浏览(54)
  • 微信小程序时钟

    1、页面布局 2、页面样式 3、页面逻辑 4、图片资源 下载链接: https://pan.baidu.com/s/1xrKOB4XD0OQqgM_CSMbk0A

    2024年02月13日
    浏览(64)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(63)
  • 微信小程序项目实例——打卡时钟

    项目代码见文字底部 这是一款简单实用的小时钟工具 分为工作和休息两种状态 用户可以设置相应的时间 所有的时钟记录都会被保存下来 首页由计时器、任务输入框和两个计时按钮组成 效果图如下: 用户在设置界面可以更改工作时长和休息时长 效果图如下: 点击下载

    2024年02月16日
    浏览(37)
  • 微信小程序-03

    小程序官方把 API 分为了如下 3 大类: 事件监听 API 特点:以 on 开头,用来监听某些事件的触发 举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件 同步 API 特点1:以 Sync 结尾的 API 都是同步 API 特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出

    2024年01月23日
    浏览(33)
  • 微信小程序快速入门03

    🏡浩泽学编程 :个人主页  🔥 推荐专栏 :《深入浅出SpringBoot》《java项目分享》               《RabbitMQ》《Spring》《SpringMVC》 🛸学无止境,不骄不躁,知行合一 本文讲诉:生命周期、WXS脚本。 生命周期(Life Cycle) 是指一个对象从创建 - 运行 -销的整个阶段,强调的

    2024年01月20日
    浏览(44)
  • 03-微信小程序常用组件-视图容器组件

    微信小程序组件-视图容器 微信小程序包含了六大组件: 视图容器 、 基础内容 、 导航 、 表单 、 互动 和 导航 。这些组件可以通过WXML和WXSS进行布局和样式设置,从而构建出丰富的小程序界面和交互体验。 其中,视图容器组件包括view和scroll-view等,用于实现页面的结构和

    2024年02月12日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包