微信小程序笔记——滚动计数器_微信文章滑动计时实现原理

  效果实现起来不难，主要用到了小程序的动画。

<template>
  <view class="group">
    <view class="title">滚动计数器</view>
    <view class="body">
      <block wx:for="{{numberWheelArg}}" wx:item="item" wx:key="index">
        <view class="block" animation="{{item.animation}}">
          <block wx:for="{{numberArg}}" wx:item="item" wx:key="index">
            <block wx:if="{{index === 0}}">
              <text style="color:black;">{{item}}</text>
            </block>
            <block wx:else>
              <text>{{item}}</text>
            </block>
          </block>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import wepy from 'wepy';

  class NumberWheel {
    constructor(animation = null) {
      this.animation = animation;
    }
  }

  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: '滚动计数器'
    };

    data = {
      numBerWheelSize: 10,
      numberWheelArg: [],
      numberArg: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
    };

    onLoad() {
      this.initData();//初始化数据
    }

    initData() {
      const initArg = [];
      for (let i = 0; i < this.numBerWheelSize; i++) {
        initArg.push(new NumberWheel());
      }
      this.numberWheelArg = initArg;
      let start = 123456789;
      setInterval(() => {
        this.redraw(start++);
      }, 2000);
    }

    redraw = (number) => {
      console.log(number);
      let stamp = number.toString();
      if (stamp.length < this.numBerWheelSize) {
        stamp = '0'.repeat(this.numBerWheelSize - stamp.length) + stamp;
      }
      let copy = [];
      for (let i = 0; i < this.numBerWheelSize; i++) {
        let animation = wx.createAnimation();
        animation.translate(0, (Number(stamp.charAt(i)) * -28)).step();
        copy.push(new NumberWheel(animation.export()));
        this.numberWheelArg = copy;
      }
      this.$apply();
    };

  }
</script>
<style lang="stylus">

  _size = 28px
  _border = white solid 1px
  _titleTextColor = red, orange, yellow, green, cyan, blue, purple
  _numGroupColor = #606060, #cacaca, #606060

  page
    display flex
    display -webkit-flex
    justify-content center
    align-items center
    background-color black
    width 100%
    height 100%

  .group
    display flex
    display -webkit-flex
    justify-content center
    align-items center
    flex-direction column
    color white

  .title
    background radial-gradient(_titleTextColor)
    background -webkit-radial-gradient(_titleTextColor)
    -webkit-background-clip text
    background-clip text
    color transparent
    margin-bottom 20px

  .body
    border _border
    border-right none
    display flex
    display -webkit-flex
    justify-content center
    background linear-gradient(_numGroupColor)
    background -webkit-linear-gradient(_numGroupColor)
    overflow hidden

  .body .block
    height _size
    display -webkit-flex
    display flex
    flex-direction column

  .body .block > text
    height _size
    width _size
    border-right _border
    text-align center
    line-height _size
    font-size 16px

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

  实现效果图。

  原理图。

参考jQuery滚动数字、计数器