小程序列表倒计时使用wxs实现

创建一个wxs文件

/*** gb* 列表展示倒计时（传入事件格式为字符串：2021-02-18 12:00:00） * systimestamp:当前时间，compareTime:结束时间*/
var formatterTimer = function (systimestamp, compareTime) {var result = {};var nowTime = systimestamp; // 当前时间的时间戳 也就是系统时间戳var reg = getRegExp("-", "g"); // 获取正则表达式，全局替换var str = compareTime.replace(reg, '/'); // 时间格式转换// 将字符串转换成时间格式var timePublish = getDate(str).valueOf();var futureTime = getDate(timePublish).getTime(); // 比较时间的时间戳// 未来的时间减去现在的时间 ;//有时会多一分钟，在这里可以减一分钟即可。var resTime = (futureTime - nowTime) / 1000;// 结束时间var zero = futureTime - nowTime;if (zero >= 0) { // 认为还没有到达结束的时间var h = (Math.floor(resTime / 3600)) < 10 ? '0' + (Math.floor(resTime / 3600)) : (Math.floor(resTime / 3600));var m = (Math.floor(resTime / 60) % 60) < 10 ? '0' + (Math.floor(resTime / 60) % 60) : (Math.floor(resTime / 60) % 60);var s = (Math.floor(resTime % 60)) < 10 ? '0' + (Math.floor(resTime % 60)) : (Math.floor(resTime % 60));// h + ':' +result =  m + ':' + s;result.status = true;} else {// 00:result = '00:00';result.status = false;}return result;
};
//将倒计时方法导出
module.exports = {formatterTimer: formatterTimer
}

wxml文件引入

<wxs src="../../utils/countDown.wxs" module="countdown" />
//在wxml文件内使用该方法，systimestamp在js文件内获取系统时间，第二个参数为倒计时结束时间传入即可
countdown.formatterTimer(systimestamp,item.expirationTime)

小程序列表倒计时使用wxs实现相关推荐

每日三思:优化微信小程序中倒计时占内存较大(19-0612-1917)
小程序的倒计时存在暂用手机内存较大的问题,尤其是在列表中,如果每一项都有倒计时的话,一进页面就会卡死解决思路每次启用倒计时的时候,先清除倒计时,再启用(也就是一条腿走路,内存中只有当前的倒计时); ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序动态倒计时
微信小程序之倒计时插件 wxTimer 1.在全局app.js引入下载: wxTimer 然后把wxTimer文件放在js中 for (let i = 0; i < addEvaluate.l ...
小程序（倒计时的制作）
小程序(倒计时的制作) 微信小程序如火如荼,今天我借教程做一篇倒计时效果的小程序页面. 这样的效果是怎样实现的呢按以下步骤操作 wxml文件放个text: <view><text& ...
微信小程序：新功能WXS解读（2017.08.30新增）
注意(来自官方文档) wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行. wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致. wxs 的 ...
小程序小程序列表模板
小程序列表模板今天做小程序列表页面百度搜了一圈也没有一个模板今天花了两个小时自己做了一个放图 ! 中间的隔离线在手机显示的时候颜色比较浅截图上面显示的比较深数据是死的弄成活的写for就可 ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
python控制相机自动拍照_微信小程序实现倒计时调用相机自动拍照功能
这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下在某 ...
微信小程序设置倒计时效果
效果微信小程序设置倒计时步骤 1.设置一个定时器,然后将时间设为一秒 2.在这个函数里将当前时间距终止的时间,的时间戳的差值减一 3.计算剩余的时间,还剩的时分秒等 4.将计算的时间保存到data中 ...
Android仿微信首页下拉显示小程序列表
花点时间重新熟悉一下AndroidUI方面的东西,把古董PullToRefreshView又撸了一遍,技术这种东西真是忘得快啊...在基础上新增一点东西,粗糙地实现了仿微信首页下拉显示小程序列表的样式 ...

小程序列表倒计时使用wxs实现

小程序列表倒计时使用wxs实现相关推荐

最新文章

热门文章