Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序iView Weapp实现一个倒计时

小程序iView Weapp实现一个倒计时

作者头像
王小婷
发布于 2025-05-18 11:36:28
发布于 2025-05-18 11:36:28
8200
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

昨天把组件库 iView Weapp研究了一下,里面确实有很多不错的组件,对于组件的使用,也写了一下笔记:五分钟上手-微信小程序组件库 iView Weapp

https://cloud.tencent.com/developer/article/1448408

今天用小程序iView Weapp实现一个倒计时。具体可参考文档。

wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view class="view-wrap">
    <text class="type-title">倒计时:</text>
    <i-count-down
            target="{{targetTime}}"
            clear-timer="{{clearTimer}}"
    ></i-count-down>
</view>

js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {
   
    clearTimer: false
  },
  onLoad() {
    this.setData({
      targetTime: new Date().getTime() + 6430000,
    });
  },
  onUnload() {
    this.setData({
      clearTimer: true
    });
  },
  myLinsterner(e) {
    this.setData({
   
    });
  }
});

json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
"usingComponents": {
  "i-count-down": "../../dist/count-down/index",
  "i-card": "../../dist/card/index"
}
}

效果如下所示

5640239-0dcc724952746a83.gif
5640239-0dcc724952746a83.gif

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1

90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-06-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
五分钟上手-微信小程序组件库 iView Weapp
介绍:iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是一套一套高质量的微信小程序 UI 组件库。
王小婷
2019/06/19
8730
小程序计时器
之前写了一个小程序倒计时的demo,在网上查看了一下,计时器很少有demo,现在来写一个。
王小婷
2019/06/24
3K0
小程序计时器
小程序调用天气接口并且渲染在页面
五分钟上手-微信小程序组件库 iView Weapp https://www.jianshu.com/p/09b4515152ff
王小婷
2025/05/18
730
小程序调用天气接口并且渲染在页面
小程序实现简单的倒计时秒杀效果
2:时分秒倒计时+样式 拼团秒杀功能 https://blog.csdn.net/qq_41473887/article/details/81287786
王小婷
2022/05/13
1K0
小程序实现简单的倒计时秒杀效果
小程序云开发实战六:云数据库读取的数据显示在小程序端列表里
参考的读取api,请点击:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
王小婷
2025/05/18
1130
小程序云开发实战六:云数据库读取的数据显示在小程序端列表里
微信小程序之自定义倒计时组件
开头 最近写小程序写上瘾了,业务上需要实现一个倒计时的功能,考虑到可拓展以及使用方便,便将其封装成组件(写习惯了JSX不得不吐槽小程序自定义组件的繁琐) 需求 可配置倒计时的时间 倒计时结束后执行事件 可配置倒计时时间的格式 步骤 先定义自定义组件的properties,这里有两个父组件传给该倒计时组件的参数target倒计时的时间,format倒计时时间的格式 properties: { target: { type: String, }, format: {
w候人兮猗
2020/07/01
2.3K0
小程序动端组件库Vant Weapp的使用
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用
王小婷
2019/01/03
2.1K0
小程序云开发实现删除更新功能
用id:options.id把id先直接赋值过来,在页面加载的时候,页面里面就有了id,后续操作更加方便简单.
王小婷
2025/05/18
860
小程序云开发实现删除更新功能
小程序踩坑:Setting data field "xxxx" to undefined is invalid.
在这篇文章里面:https://www.jianshu.com/p/4bca132c5ade,其实遇到遇到了一个小的bug。
王小婷
2025/05/18
880
小程序踩坑:Setting data field "xxxx" to undefined is invalid.
小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)
接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,做了一个小项目,类似于豆瓣读书系列。 具体是这样的一个流程,后面会一步步的实现。
王小婷
2025/05/18
770
小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)
强烈推荐:绝对是好用的小程序开源框架
想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库。
王小婷
2019/03/05
2.1K0
小程序底部动画弹框
接上一篇的举一反三:微信小程序商品筛选,侧方弹出动画选择页面:https://www.jianshu.com/p/e76925d39c56;这个小程序底部动画弹框也是项目之中常见的功能之一,效果如下图所示。
王小婷
2025/05/18
720
小程序底部动画弹框
小程序实现竖行布局视图(类表格)
wxml <view class="item-box"> <view class="items"> <view wx:for="{{list}}" wx:key="{{index}}" class="item"> <view data-index="{{index}}" class="inner txt"> <span class="item-data">{{item.rank}}</span> <span class="item-datacente
王小婷
2022/05/13
8771
小程序实现竖行布局视图(类表格)
小程序wx.switchTab的跳转传参问题
这篇文章demo是为了一个粉丝(实力宠粉,手动微笑,哈哈)写的,正好今天周五,时间还是比较多的,不急着回家,因为回家也是玩游戏,留在办公室里面还可以多学习一些知识。和这篇文章类似,小程序扫码成功后带着参数跳转到指定页面,不同的地方是tab页的跳转。
王小婷
2019/01/28
3.5K0
小程序wx.switchTab的跳转传参问题
小程序中加载html5地图界面链接
这个绝对是年前上班的库存,因为回到家,就不想学习啦,更多的时间是在和家人打牌,玩游戏,然后走亲访友,吃吃吃,但想着既然参加了简书的日更计划,那么就坚决不能断更,不然前面的所有的努力都白白浪费啦。
王小婷
2025/05/18
930
小程序中加载html5地图界面链接
微信小程序常见的UI框架/组件库总结
想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库。
王小婷
2025/05/18
2550
微信小程序常见的UI框架/组件库总结
小程序动画animation向左移动效果
今天在家做一个私活,效果类似于淘宝的筛选功能,微信小程序商品筛选,侧方弹出动画选择页面,研究了一下小程序的动画相关的文档,于是又get到了一个新的小程序技能,小程序动画animation向左移动效果。
王小婷
2025/05/18
1000
小程序动画animation向左移动效果
小程序JS动态修改样式
先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色。
王小婷
2018/12/26
10.3K0
小程序点击按钮出现和隐藏遮罩层
最近在实现一个小功能,点击按钮的时候,会从右侧滑动弹出一个信息层,与此同时,信息层会和遮罩层一起出现,于是小程序的动画功能和小程序点击按钮出现和隐藏遮罩层分开写成了demo了。
王小婷
2025/05/18
670
小程序点击按钮出现和隐藏遮罩层
微信小程序扫一扫的功能实现
突然接到了个小程序的项目,手上的管理后台终于可以放下一段时间了 ,算了一下,今年几乎都在写管理后台的几个项目,真心没有什么特别的进步,基本都是靠着组传代码,不断的重构,复用。
王小婷
2018/12/24
3.4K0
微信小程序扫一扫的功能实现
相关推荐
五分钟上手-微信小程序组件库 iView Weapp
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验