微信小程序实战-02翻页时钟-2

微信小程序实战系列

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

文章目录

  • 微信小程序实战系列
  • 前言
  • 计时功能实现
    • clock.wxml
    • clock.wxss
    • clock.js
  • 运行效果
  • 总结

前言

接着《微信小程序实战-01翻页时钟-1》,继续完成“6个页面的静态渲染和计时”功能。

计时功能实现

clock.wxml

clock.wxml中 新增了wx:for(基础知识),用来现实六个“页面”;“item”相当于一个较大的盒子“包裹”着“flip_item”及其后代组件。“item”用来渲染时钟的四个“黑点”,flip_item用来渲染“页轴”。

<!--pages/clock/clock.wxml--><view class="container"><view class="clock_container"><block wx:for="{{timeArr}}" wx:for-index="timeIndex" wx:for-item="timeItem" wx:key="timeIndex"><view class="item"><view class="flip_item"><view class="up"><view class="number">{{timeItem}}</view></view><view class="down"><view class="number">{{timeItem}}</view></view></view></view></block></view>
</view>

clock.wxss

CSS中,::before::after都是创建一个伪元素(pseudo-element);::before为匹配选中的元素的第一个子元素;::after为已选中元素的最后一个子元素。通常会配合content属性来为该伪元素添加装饰内容。这个伪元素默认是行内元素。

CSS中,:nth-of-type() 创建一个伪类(pseudo-class),基于同类型元素(组件名称)的兄弟元素中的位置来匹配元素。

每段样式的作用在代码中都做了注释。

/* pages/clock/clock.wxss */
.clock_container{display: flex;
}/* 设置item的样式,固定宽高 */
.item {position: relative;width: 90rpx;height: 155rpx;border:1rpx solid rgba(121, 121, 121, 0.384);box-shadow: 0 4rpx 18rpx rgba(0,0,0,0.9);border-radius: 10rpx;margin-right: 12rpx;background-color: #55e3e3;
}.flip_item{position: relative;width: 100%;height: 100%;box-shadow: 0 4rpx 18rpx rgba(0,0,0,0.9);
}/* 第2、4页增加右边距 */
.item:nth-of-type(4),
.item:nth-of-type(2){margin-right: 48rpx;
}/* 第2、4页增点 “黑点” */
.item:nth-of-type(4)::before,
.item:nth-of-type(4)::after,
.item:nth-of-type(2)::before,
.item:nth-of-type(2)::after{position: absolute;content:'';width: 25rpx;height: 25rpx;background-color: rgba(0,0,0,0.8);border-radius: 50%;left: 105rpx;
}/* 增加 上“黑点”边距 */
.item:nth-of-type(4)::before,
.item:nth-of-type(2)::before{top: 30rpx;
}/* 增加 下“黑点”边距 */
.item:nth-of-type(4)::after,
.item:nth-of-type(2)::after{bottom: 30rpx;
}/* 时钟的单个数字 */
.number{position: absolute;/* border: 1px solid red; 调试用 */width: 100%;height: 155rpx;color: #252525;text-align: center;text-shadow: 0 2rpx 4rpx rgb(0, 0, 0);font-size: 118rpx;font-weight: bold;
}/* 页轴 */
.flip_item::before{position: absolute;content: '';top: 75rpx;width: 100%;height: 5rpx;background-color: rgba(0, 0, 0, 0.5);
}/*  掩盖“down”的上半部分 */
.down{position: absolute;width: 100%;height: 50%;overflow: hidden;bottom: 0;
}
.down .number{bottom: 0;
}/* 掩盖“up”的下半部分 */
.up{position: absolute;width: 100%;height: 50%;overflow: hidden;
}

clock.js

// pages/clock/clock.js
Page({/*** 页面的初始数据*/data: {timeArr:[]},/*** 获取时间数组*/getTimeArr: function(){let tempArr = []let str = ""let now = new Date()// 获取小时let hours = now.getHours()// console.log("hours", hours)str = hours.toString()if (str.length === 1){tempArr[0] = '0'tempArr[1] = str[1]}else{tempArr[0] = str[0]tempArr[1] = str[1]}// 获取分钟let minutes = now.getMinutes()// console.log("minutes", minutes)str = minutes.toString()if (str === '0'){tempArr[2] = '0'tempArr[3] = '0'}else if (str.length === 1){tempArr[2] = '0'tempArr[3] = str[0]}else{tempArr[2] = str[0]tempArr[3] = str[1]}// 获取秒数let seconds = now.getSeconds()// console.log("seconds", seconds)str = seconds.toString()if (str === '0'){tempArr[4] = '0'tempArr[5] = '0'}else if (str.length === 1){tempArr[4] = '0'tempArr[5] = str[0]}else{tempArr[4] = str[0]tempArr[5] = str[1]}this.setData({timeArr:tempArr})// console.log("timeArr:", this.data.timeArr)},/*** 设置定一个定时器, 每秒更新TimeArr*/timeRunner: function(){this.timer = setInterval(()=>{ //设置定时器this.getTimeArr()}, 1000)},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getTimeArr()this.timeRunner()},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {clearInterval(this.timer);},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

运行效果

请添加图片描述

说明:本文样式代码中的nth-of-type只能在WebView渲染模式下正常显示;在Skyline模式下,由于不支持“nth-of-type”,因此“小黑点”渲染不出来,后续Skyline是否支持“nth-of-type”可能只有天知道了!

请添加图片描述

总结

今天完成了三分之二的“翻页时钟”,下一篇博文将记录最后一个部分“动态翻页效果”。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/610789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python类装饰器基础

1 python类装饰器基础 类装饰器是管理类的一种方式&#xff0c;不是包装单个函数或方法&#xff0c;而是用装饰器的额外逻辑&#xff0c;来包装实例的构建和调用&#xff0c;从而实现对主体类的扩展。 主体类被装饰后&#xff0c;通过主体类创建实例对象时&#xff0c;自动调…

Linux前后端项目部署

目录 1.jdk&tomcat安装 配置并且测试jdk安装 修改tomcat 配置文件 登入tomcat 发布 安装mysql 导入sql数据 发布项目war包 redis安装 nginx安装 配置nginx域名映射 部署前端项目 centos 7的服务安装 安装jdk 安装tomcat 安装Mysql 安装redis 安装nginx 前后…

【Unity】Timer计时器属性及使用

可以代替协程完成延时操作 可以不用Update进行计时 GitHub开源计时插件 网址&#xff1a;https://github.com/akbiggs/UnityTimer/tree/master 导入&#xff1a;URL&#xff1a;https://github.com/akbiggs/UnityTimer.git 基本功能&#xff1a; 创建计时器&#xff1a; Time…

深入理解 Hadoop (四)HDFS源码剖析

HDFS 集群启动脚本 start-dfs.sh 分析 启动 HDFS 集群总共会涉及到的角色会有 namenode, datanode, zkfc, journalnode, secondaryName 共五种角色。 JournalNode 核心工作和启动流程源码剖析 // 启动 JournalNode 的核心业务方法 public void start() throws IOException …

【打卡】牛客网:BM80 买卖股票的最好时机(一)

模板的&#xff1a; 我的想法是&#xff0c;这个题就是找最大差。两个递归是可以解决的&#xff0c;时间复杂度是o(n^2)。但是题目要求时间复杂度是o(n)。 模板用了一个两行的dp数组&#xff0c;在一次for循环中&#xff0c;更新两行&#xff0c;是亮点。 第一行记录利润。全…

OpenHarmony之hdc

OpenHarmony之hdc 简介 hdc&#xff08;OpenHarmony Device Connector&#xff09;是 OpenHarmony 为开发人员提供的用于调试的命令行工具&#xff0c;通过该工具可以在Windows/Linux/MacOS等系统上与开发机或者模拟器进行交互。 类似于Android的adb&#xff0c;和adb类似&a…

探索Java中的Map:领略键值对的无限魅力

目录 1、前言 2、介绍Map 2.1 什么是Map 2.2 Map的特点 3、常用的Map实现类 3.1 HashMap 3.2 TreeMap 3.3 LinkedHashMap 3.4 Hashtable 3.5 ConcurrentHashMap 4、操作Map的常用方法 5、Map的应用场景 5.1 缓存 5.2 数据存储 5.3 计数器 6、常见问题解答 6.1…

Spring中线程池ThreadPoolTaskExecutor的使用

一、为什么要使用线程池 在项目中使用多线程时&#xff0c;通常建议使用线程池而不是直接使用 new Thread 的方式来创建线程。下面是一些原因&#xff1a; 资源管理和性能优化&#xff1a; 使用线程池可以更好地管理系统资源&#xff0c;控制并发线程数&#xff0c;避免创建过…

SEO 分步教程:初学者掌握的 8 个简单基础知识

如果您刚刚开始使用搜索引擎优化 &#xff08;SEO&#xff09;&#xff0c;那么分步 SEO 教程是有序的。在这一点上&#xff0c;你可能已经听说过一些基本术语&#xff0c;如关键词研究和页面优化。但是&#xff0c;您如何应用迄今为止收集的所有知识呢&#xff1f; 如果您刚刚…

k8s的存储卷

存储卷----数据卷 容器内的目录和宿主机的目录进行挂载 容器在系统上的生命周期是短暂的&#xff0c;delete&#xff0c;k8s用控制创建的pod&#xff0c;delete相当于重启&#xff0c;容器的状态也会回复到初始状态 一旦回到初始状态&#xff0c;所有的后天编辑的文件都会消…

获取直播间的最新评论 - python 取两个list的差集

python 取两个list的差集 作用&#xff1a;比如我要获取评论区列表&#xff0c;先获取了一遍&#xff0c;这个时候有人评论了几条&#xff0c;我再获取一遍后&#xff0c;找出多的那几条 使用set数据类型来取两个列表的差集。差集表示仅包含在第一个列表中而不在第二个列表中…

微信公众号——微信公众号实现发送模板消息

准备工作 在调用微信接口获取AccessToken时&#xff0c;需要使用到微信公众号的appid及appsecret&#xff0c;获取方式如下&#xff1a; 1.已有公众号 已有公众号&#xff1a; 有属于自己的公众号账户&#xff0c;登录微信公众平台(https://mp.weixin.qq.com)&#xff0c;在…

SWM341系列之SWM34SRET6介绍

SWM341系列的介绍 本文介绍了华芯微特SWM341系列主要性能&#xff0c;和其系列之一的SWM34SRET6-50驱动4.3寸800*480 TFTLCD显示的例程应用。 SWM341系列性能 SWM341是一款基于ARM Cortex-M33的32位微控制器&#xff0c;片上包含精度为 1%以内的 20MHz/40MHz 时钟&#xff0c;最…

起诉业务员飞单需要什么证据?

在商业活动中&#xff0c;业务员飞单是一种常见的违规行为&#xff0c;给企业带来了巨大的经济损失。如果企业怀疑业务员存在飞单行为&#xff0c;需要收集足够的证据来证明其行为&#xff0c;并采取法律手段维护企业的合法权益。那么&#xff0c;起诉业务员飞单需要什么证据呢…

【数据库原理】(19)在实际数据库设计中关系规范化的应用

一.关系规范化的基本原则 1. 规范化的目的和基本思想 目的&#xff1a;通过分解低一级范式的关系模式&#xff0c;转换为高一级范式的关系模式集合&#xff0c;以减少数据冗余和更新异常。 基本思想&#xff1a; “一事一地”&#xff1a;确保每个关系模式只描述一个概念、实…

odoo17 | 视图操作按钮

前言 到目前为止&#xff0c;我们主要通过声明字段和视图来构建我们的模块。在上一章中&#xff0c;我们刚刚通过计算字段和onchanges引入了业务逻辑。在任何真实的业务场景中&#xff0c;我们都会希望将一些业务逻辑链接到操作按钮。在我们的房地产示例中&#xff0c;我们希望…

代码随想录算法训练营第一天 | 704. 二分查找、27. 移除元素

代码随想录算法训练营第一天 | 704. 二分查找、27. 移除元素 文章目录 代码随想录算法训练营第一天 | 704. 二分查找、27. 移除元素1 数组理论基础&#xff08;基于面试&#xff09;1.1 面试问题针对 Python1.2 面试问题针对 C 2 LeetCode 704.二分查找2.1 二分查找的实现2.2 P…

Buzz 离线音频转字幕工具(完全免费,无需登录)

关于 Buzz Buzz 是一款可以自动识别语音为文本字幕的软件工具&#xff0c;基于 OpenAI 开源的 Whisper 自动语音识别模型&#xff0c;可以批量将音频或者是视频中的内容自动转化为带有时间的字幕&#xff0c;速度非常快&#xff0c;是一款能极大提高效率的生产力小工具。 Bu…

JavaScript-对象-笔记

1.字面量创建对象、对象的使用 对象就是一组 属性和方法的集合 属性&#xff1a; 特征 相当于变量 静态 是什么 方法&#xff1a; 行为 相当于函数 动态 干什么 创建对象 创建对象的第一种&#xff1a;使用字面量 {} 对象中的元素是键值对 使用逗号隔开 键:值 的形式 var 对象名…

Vue项目在ie浏览器中显示白屏优化提示

在工作中用到Vue开发项目&#xff0c;用户在IE浏览器打开页面&#xff0c;结果显示空白屏。作为开发者当然知道是浏览器版本过低导致语法不支持&#xff0c;但是用户不知情的情况下显示空白屏就很不友好。这时候有必要在页面上做点提示语告诉用户切换浏览器&#xff0c;下面是页…