微信小程序笔记——滚动计数器

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

<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>

  实现效果图。

  原理图。

参考jQuery滚动数字、计数器