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

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

前言

我经常在手机上用的一款app有一个功能是翻页时钟,基于之前学习的小程序相关的基础内容,我打算在微信小程序中也设计一个翻页时钟功能,Just do it!

需求分析

作为练手项目,需求比较简单,两个功能:

  1. 支持时、分、秒显示;
  2. 支持翻页效果;

整体效果大概是这个样子:

微信小程序实战-01翻页时钟-1,小程序,微信小程序,小程序

功能设计

界面设计

界面结构设计

wxml整体结构比较简单,设计6个页面和两组“:”。

界面样式设计

wxss的样式(CSS)对于我来说还是很陌生,没做过前端,也是边学边干。总体涉及的CSS的知识点会比较杂,对于样式的描述如果是动态的部分,还是不太了解,用文字描述也会不太容易。涉及的知识点,通过代码注释和理论结合进行阐述。

整体的样式也如上图所示。

逻辑设计

主要是通过js来完成计时和翻页的功能。

首先,我会先完成一个页面的渲染;然后再完成6个页面的渲染和计时,最后再完成动态翻页效果。

单页功能实现

本文先记录一个时钟数字页的渲染实现过程。

因为要有“翻页”,所以一个页面由一个view组件(item)来构造,由于涉及翻页,所以每个item设计成上下半部和一个页轴。上下半部也是通过view组件来构造,页轴通过样式来构造。

clock.wxml代码如下:

<!-- clock.wxml -->
<view class="container">
  <view class="item">
    <view class="up">
      <view class="number">5</view>
    </view>
    <view class="down">
      <view class="number">5</view>
    </view>
  </view>
</view>

clock.wxss代码如下:

/* 设置item的样式,固定宽高 */
.item {
  position: relative;
  width: 90rpx;
  height: 155rpx;
  border:1rpx solid rgba(121, 121, 121, 0.384);
  box-shadow: 0 2rpx 18rpx rgba(0,0,0,0.7);
  border-radius: 10rpx;
}


/* 时钟的单个数字 */
.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;
}

/* 页轴 */
.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;
}

上述的CSS样式代码都是结合调试工具,一点点调试出来的。在这个过程中,会慢慢地去了解不同的属性的作用和使用、不同选择器的使用、不同布局、怎样将元素定位。

对初学者来说,我当前的体会是通过开发者工具的调试器去查看详细的元素信息,同时,不断的去尝试,直到get你想要的渲染效果。中间会有很多尝试都是不奏效,从结果的角度来说可能是无用功,但是从学习的角度来说对CSS的知识点又增进了一些。因为CSS的知识点比较碎,比较多,有些概念也是初次遇到,所以这部分的调试工作会花费比较多的时间。不知道有没有更高效的工具或手段来完成CSS部分的工作,我目前所用的方式估计是最原始的手段,step by step。但是,当调试出自己想要的效果且知道每行代码的作用以及背后的知识点时,还是比较满意的。

运行结果

微信小程序实战-01翻页时钟-1,小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-784216.html

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

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

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

相关文章

  • 117.【微信小程序 - 01】

    (1).小程序与普通网页开发的区别 运行环境不同 : 网页运行在 浏览器 、小程序运行在 微信 。 开发模式不同 : 网页的开发模式: 浏览器+代码编辑器 。 小程序的有自己的一套标准的开发模式 (1). 申请小程序开发账户 。 (2). 安装小程序开发者工具 。 (3). 创建和配置小程序项目

    2024年02月11日
    浏览(42)
  • 微信小程序01:小程序简单入门

    目录 1.关于微信小程序: 1.1. 微信小程序(wei xin xiao cheng xu) 1.1.2. 限制: 1.1.3 小程序可以干什么? 1.2:小程序官网: 2.账号申请 2.1正式号: 2.2测试号: 3.小程序安装及基本展示页面 3.1小程序安装 3.2页面小修改 3.3建立触摸事件  什么是小程序?         简称小程序,

    2024年02月09日
    浏览(42)
  • 【微信小程序】小程序基础入门01

    😉博主:初映CY的前说(前端领域) ,📒本文核心:微信小程序的入门介绍 【前言】小程序是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又

    2023年04月16日
    浏览(40)
  • 微信小程序01-底部导航栏设置

    1 在app.json找到 pages,增加pages配置地址栏路径,保存后会自动生成相应文件夹; 2,增加  tabBar  参数,“selectedColor” 参数是设置选中后文字的颜色;\\\"list\\\" 中放置导航数据。      list 中 相关参数: pagePath ---- 指向地址                                   text   ---- 

    2024年02月12日
    浏览(47)
  • 微信小程序-JAVA Springboot项目-小程序搭建-项目搭建01

    目录 一、序言 二、小程序搭建         本文主要讲述一个微信小程序前后端项目搭建的过程,主要内容包括小程序(前端)搭建和后端搭建,其中会描述可能遇到的问题以及解决措施,文章将会分为几个部分进行讲述, 这章将讲述前端小程序搭建的内容,其中包括软件下载

    2024年04月14日
    浏览(41)
  • 微信小程序篇_01 微信小程序与Java后端接口交互

    本文主要介绍小程序前后端数据的交互,实践演示。 创建后端项目 我这里就创建一个SpringBoot项目作为演示。 在创建项目中选择Spring Initializr 要勾选SpringWeb框架,当然你也可以后面导入,确认好设置后,创建项目。 然后在Maven依赖中调整SpringBoot的版本 目录结构如下,缺少的

    2023年04月08日
    浏览(38)
  • 微信小程序入门01-工具的下载安装及模板的安装

    小程序开发现在已经有多种模式了,有使用uniapp开发的,使用微信开发者工具开发的,还有低代码工具也支持开发小程序的。 在众多开发模式中,使用官方开发者工具开发也是一种形式。本篇我们就介绍一下如何用微信开发者工具搭建小程序的开发环境。 官方提供的开发者

    2024年02月11日
    浏览(37)
  • 微信小程序项目实战 微信小程序的事件对象

    目录 小程序前后端交互 自定义组件的使用 语法说明 properties 定义 案例  微信小程序的事件对象 e.target和e.currentTarget  微信小程序的事件传参 传参方式一: data-key=\\\'value\\\' 传参方式二: id=\\\'value\\\' scroll-view 使用  scroll-view 中使用flex布局 scroll-into-view 下拉刷新 上拉加载 微信小程

    2024年02月09日
    浏览(129)
  • 微信小程序云开发—01(云数据库、云函数的创建与基本使用)

    1. 小程序云开发,让前端程序员拥有后端的能力 2. 云函数 (nodejs) 3. 云数据库 (mogodb) 4. 云存储 5. 前端写好云函数 - 上传到云服务器 -实现自定云部署 6. 前端去调用云函数=间接通过云函数对数据库的操作 7. 前端=》全栈 1. 在app.js 2. 云函数index.js 定义id 3. 云id来自 云开发

    2024年02月15日
    浏览(46)
  • 使用STWI101WT-01串口屏的微信小程序血氧项目

    本项目是中医展示馆展示血氧饱和度、心率测试体验,通过生物传感器获得体验者的血氧饱和度、心率值,ESP32模块将数据通过蓝牙发送给微信小程序显示,或者通过串口发送给STONE串口屏STWI101WT-01显示。 特别地,STONE串口屏新升级版本有二维码qr_code部件,非常方便通过二维

    2024年02月09日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包