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

本文介绍了如何在微信小程序中创建一个倒计时功能。通过`formatterTimer`函数,将传入的日期字符串转换为时间戳,并计算剩余时间,显示为分钟:秒的格式。在WXML文件中引入并调用此函数,可以方便地实现在前端展示倒计时的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建一个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)
<think>好的,我现在要帮用户解决微信小程序启动页中带有倒计时的胶囊样式的实现问题。首先,我需要明确用户的具体需求。用户想要在启动页显示一个倒计时,并且这个倒计时要呈现胶囊样式,也就是类似微信小程序右上角的胶囊按钮形状的倒计时显示。 接下来,我得回忆一下微信小程序的框架结构和组件。微信小程序的页面结构由WXML、WXSS、JS和JSON文件组成。启动页通常是小程序的第一个页面,所以可能需要设置这个页面为首页,或者在app.json中配置启动页面。 然后,关于倒计时功能,微信小程序本身没有内置的倒计时组件,但可以使用JavaScript的定时器setInterval或者setTimeout来实现。不过,考虑到性能问题,可能需要更精确的倒计时控制,或者使用官方推荐的API。另外,微信小程序提供了WXS(WeiXin Script)可以用于处理一些视图层的逻辑,但倒计时通常还是建议在JS中处理,然后通过数据绑定更新视图。 胶囊样式的设计需要用到WXSS来模拟。胶囊样式通常是圆角矩形,带有背景色和文字,可能还有边框。需要确定具体的样式参数,比如圆角大小、背景颜色、字体颜色、内边距等。同时,胶囊的位置可能需要绝对定位,放在页面的某个角落,比如右上角,或者居中显示,具体要看用户的需求。 用户提到的胶囊样式可能类似于微信小程序右上角的菜单胶囊,那个是系统自带的,但用户希望自己实现一个类似的样式作为倒计时显示。所以需要手动创建一个视图组件,并应用相应的样式。 接下来,我需要考虑如何将这些元素结合起来。首先,在WXML中创建一个view组件,设置对应的class,然后在WXSS中定义这个class的样式为胶囊形状。倒计时的数字需要动态更新,所以需要在JS中定义一个变量,比如countdown,初始值为需要的秒数,比如5秒。然后使用setInterval每秒减少这个值,并更新到视图。当倒计时为0时,跳转到首页或者其他页面。 可能需要注意的问题包括:页面跳转的方式,使用wx.navigateTo还是wx.redirectTo,或者wx.switchTab,这取决于目标页面是否是tabBar页面。另外,倒计时结束后要清除定时器,避免内存泄漏。还有,页面卸载时也需要清除定时器,比如在onUnload生命周期函数中处理。 另外,胶囊的位置可能需要使用绝对定位,比如position: fixed,然后设置top和right的值,或者根据设计需求调整。如果用户希望倒计时胶囊在右上角,可以参考系统胶囊的位置,但需要注意避开系统胶囊的区域,避免重叠。不过,如果用户希望的是在启动页中间显示,那定位方式又不同了。 还需要考虑不同屏幕尺寸的适配问题,使用rpx单位来确保在不同设备上显示一致。胶囊的样式可能需要水平居中,使用flex布局或者绝对定位的left和transform属性来实现居中。 代码示例方面,首先在WXML中创建一个显示倒计时的view,绑定倒计时的变量。然后在JS中设置倒计时的逻辑,包括定时器的启动和清除。在WXSS中定义胶囊的样式,包括背景颜色、圆角、字体颜色等。 可能还需要处理用户提前点击跳过的情况,比如在胶囊旁边添加一个跳过按钮,或者允许用户点击胶囊直接跳过倒计时。这时候需要绑定一个事件处理函数,提前跳转页面并清除定时器。 最后,需要测试代码,确保倒计时正确运行,样式正确显示,并且在各种情况下(如倒计时结束、用户手动跳过)都能正确跳转页面,没有内存泄漏的问题。 总结步骤: 1. 创建启动页的WXML结构,添加倒计时胶囊的视图组件。 2. 使用WXSS设计胶囊样式,包括圆角、背景色、定位等。 3. 在JS中定义倒计时变量,使用定时器更新倒计时并处理页面跳转。 4. 处理用户手动跳过的交互逻辑。 5. 测试并调整样式和功能,确保兼容性和稳定性。</think>以下是在微信小程序实现倒计时的胶囊样式启动页的示例: ### 一、WXML 结构 ```html <!-- splash/splash.wxml --> <view class="container"> <!-- 胶囊倒计时容器 --> <view class="capsule" bindtap="skipSplash"> <text class="countdown-text">{{ countdown }}s</text> <text class="skip-text">跳过</text> </view> </view> ``` ### 二、WXSS 样式 ```css /* splash/splash.wxss */ .container { width: 100vw; height: 100vh; background: #fff; } .capsule { position: fixed; top: 30rpx; right: 30rpx; display: flex; align-items: center; padding: 8rpx 20rpx; background: rgba(0, 0, 0, 0.4); border-radius: 40rpx; color: #fff; font-size: 28rpx; z-index: 999; } .countdown-text { margin-right: 10rpx; } .skip-text { font-weight: bold; } ``` ### 三、JavaScript 逻辑 ```javascript // splash/splash.js Page({ data: { countdown: 5 }, onLoad() { this.startCountdown(); }, startCountdown() { this.timer = setInterval(() => { if (this.data.countdown <= 1) { this.redirectToHome(); return; } this.setData({ countdown: this.data.countdown - 1 }); }, 1000); }, skipSplash() { clearInterval(this.timer); this.redirectToHome(); }, redirectToHome() { wx.switchTab({ url: '/pages/home/home' }); }, onUnload() { clearInterval(this.timer); } }); ``` ### 四、配置启动页 在 `app.json` 中添加: ```json { "pages": [ "pages/splash/splash", "pages/home/home" ], "tabBar": { "list": [ { "pagePath": "pages/home/home", "text": "首页" } ] } } ``` 关键实现要点: 1. 使用 `position: fixed` 实现右上角定位[^1] 2. 通过 `border-radius: 40rpx` 实现胶囊形状 3. 使用 `setInterval` 实现倒计时逻辑 4. 通过 `wx.switchTab` 实现页面跳转 5. 添加 `onUnload` 生命周期函数清理定时器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值