小程序条形倒计时动画


一、效果图如下:

二、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. .headpiece-time {
  10. position: relative;
  11. width: 305rpx;
  12. }
  13. .headpiece-process {
  14. position: relative;
  15. width: 138rpx;
  16. height: 14rpx;
  17. margin-right: 14rpx;
  18. border: 4rpx solid #000;
  19. overflow: hidden;
  20. background: #fff4b2;
  21. }
  22. .headpiece-process-inner {
  23. position: absolute;
  24. top: 0rpx;
  25. left: 0rpx;
  26. background: #f74242;
  27. height: 100%;
  28. transition: all 0.3s ease-out;
  29. }

四、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. this.getSystemInfo().then(v => {
  26. let maxtime = this.data.maxtime,
  27. width = this.data.width,
  28. sTime = +new Date,
  29. _ts = this,
  30. temp,
  31. animate;
  32. (animate = () => {
  33. temp = requestAnimationFrame(() => {
  34. let time = maxtime * 1000,
  35. currentTime = +new Date,
  36. schedule = 1 - (currentTime - sTime) / time,
  37. schedule_1 = schedule <= 0 ? 0 : schedule,
  38. width = parseInt(schedule_1 * 100),
  39. t = parseInt((this.data.maxtime) * schedule_1)+1;
  40. _ts.setData({
  41. width: width,
  42. t:t
  43. });
  44. if (schedule <= 0) {
  45. cancelAnimationFrame(temp);
  46. _ts.setData({
  47. width: width,
  48. t: 0
  49. });
  50. return;
  51. } else {
  52. animate();
  53. };
  54. })
  55. })();
  56. });
  57. },

阅读更多
想对作者说点什么? 我来说一句

微信小程序-精美倒计时动画

2017年12月14日 3KB 下载

程序简单实现倒计时效果

2016年11月24日 6KB 下载

没有更多推荐了,返回首页

不良信息举报

小程序条形倒计时动画

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭