微信小程序自定义倒计时组件及注意事项

倒计时功能实现：微信小程序实现倒计时功能（超简单）_洛潆的博客-CSDN博客_微信小程序倒计时功能

由于要在多个页面使用倒计时功能，在每个页面都重新写一遍就会很麻烦，所以可以把它封装为自定义组件，最终效果如下：

步骤：

在项目根目录下创建component文件夹，在内部创建topbar文件夹，右键新建Component

打开topbar.js文件，在properties节点下声明总时长和当前剩余时长

properties: {time:{type:Number,value:1800},countdown:String
},

properties节点下的值都可由组件使用者传入，type表示变量类型，value表示变量默认值，没有默认值可以使用简化写法，即变量名:变量类型

在methods节点下定义倒计时函数

methods: {countdown(){var minute=Math.floor(this.properties.time  / 60 );var second=this.properties.time  % 60second<10?second='0'+second:'';this.setData({countdown:minute+':'+second,time:this.properties.time-1})}},

在data平级节点下创建lifetimes节点（组件的生命周期函数），使用定时器每隔一秒执行一次

lifetimes:{attached(){setInterval(() => {this.countdown()}, 1000)},},

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。

在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

注意：组件内的定时器只能使用setInterval(() => {}, interval)格式，而不能使用

setInterval(function, interval)格式

topbar.wxml:

<view>{{countdown}}</view>

在app.json文件下引入组件，组件名可自定义

"usingComponents": {"topbar":"/component/topbar/topbar",},

接下来就可以在其他页面使用了，格式为：

<topbar time='1800'></topbar>
<!-- time自定义 -->

微信小程序自定义倒计时组件及注意事项相关推荐

微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
小程序自定义音频组件,带滚动条摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的而微信小程序API给我们提供的就是这样的而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
微信小程序-自定义NavBar组件
组件化组件化本身是一个可以讲的很大,也可以浓缩为封装可复用的,模版组件基于mvvm的微信小程序当然也支持这一特性,我们做项目的时候也可以把注入公用的header footer之类的封一封(其实工 ...
微信小程序自定义弹窗组件
看微信小程序的文档觉得说的不是很清楚.于是,找到这篇文章,觉得挺好看.大家可以看看: https://www.cnblogs.com/demod... 补充: 还需要在popup.json文件添加一句 ...
微信小程序自定义波浪组件
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的 ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...
微信小程序-自定义导航组件
一.如何自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在 ...
微信小程序自定义map组件标记点markers（兼容苹果和安卓）
先来看实现效果图(uniapp实现,代码在下面) 在图片中我们看到标记点有以下需求: 1.标记点是自定义的,并不是微信默认 2.标记点的自定义icon有四种形式 3.数字是动态的 4.数字颜色有两种形 ...

微信小程序自定义倒计时组件及注意事项

微信小程序自定义倒计时组件及注意事项相关推荐

最新文章

热门文章