小程序模板网

小程序条形倒计时动画

一、效果图如下:

二、wxml

 

  1. <view class='headpiece-time flex-row'>
  2. <text class='headpiece-txt'>倒计时:</text>
  3. <view class='headpiece-process'>
  4. <view class='headpiece-process-inner' style="width:{{width}}%"></view>
  5. </view>
  6. <text class='headpiece-num'>{{t}}</text>
  7. </view>
 

三、wxss

 

  1. .headpiece-num {
  2. position: absolute;
  3. top: -3rpx;
  4. right: -35rpx;
  5. width: 62rpx;
  6. height: 100%;
  7. text-align: center;
  8. }
  9.  
  10. .headpiece-time {
  11. position: relative;
  12. width: 305rpx;
  13. }
  14.  
  15. .headpiece-process {
  16. position: relative;
  17. width: 138rpx;
  18. height: 14rpx;
  19. margin-right: 14rpx;
  20. border: 4rpx solid #000;
  21. overflow: hidden;
  22. background: #fff4b2;
  23. }
  24.  
  25. .headpiece-process-inner {
  26. position: absolute;
  27. top: 0rpx;
  28. left: 0rpx;
  29. background: #f74242;
  30. height: 100%;
  31. transition: all 0.3s ease-out;
  32. }
 

四、index.js

 

  1. /**
  2. * 获取系统信息
  3. */
  4. getSystemInfo: function () {
  5. return new Promise((a, b) => {
  6. wx.getSystemInfo({
  7. success: function (res) {
  8. a(res)
  9. },
  10. fail: function (res) {
  11. b(res)
  12. }
  13. })
  14. })
  15. },
  16. /**
  17. * 进度条动画
  18. */
  19. countdown: function () {
  20. const requestAnimationFrame = callback => {
  21. return setTimeout(callback, 1000 / 60);
  22. }, cancelAnimationFrame = id => {
  23. clearTimeout(id);
  24. };
  25.  
  26. this.getSystemInfo().then(v => {
  27. let maxtime = this.data.maxtime,
  28. width = this.data.width,
  29. sTime = +new Date,
  30. _ts = this,
  31. temp,
  32. animate;
  33. (animate = () => {
  34. temp = requestAnimationFrame(() => {
  35. let time = maxtime * 1000,
  36. currentTime = +new Date,
  37. schedule = 1 - (currentTime - sTime) / time,
  38. schedule_1 = schedule <= 0 ? 0 : schedule,
  39. width = parseInt(schedule_1 * 100),
  40. t = parseInt((this.data.maxtime) * schedule_1)+1;
  41. _ts.setData({
  42. width: width,
  43. t:t
  44. });
  45. if (schedule <= 0) {
  46. cancelAnimationFrame(temp);
  47. _ts.setData({
  48. width: width,
  49. t: 0
  50. });
  51. return;
  52. } else {
  53. animate();
  54. };
  55. })
  56. })();
  57.  
  58. });
  59. },


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24460.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询