react(taro)实现数字翻动(滚动)效果

前言

因为公司业务需要，数字发生变化的时候就翻动数字进行变化，要有动画效果....

实现效果

实现逻辑

第一步，把数字显示出来

 第二步，只显示单个数字，也就是溢出隐藏设置对应的宽高

 第三步，移动数字也就是修改定位top值跟加点动画

 完结~~~。

实现代码

公共的css代码

.turn_box_container {
  margin-left: 10rpx;
}

.turn_box_container {
  position: relative;
  display: inline-block;
  float: left;
  overflow: hidden;
  background-color: red;
}

.turn_box {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  width: 100%;
  transform-origin: 0 0;
  transition: top 0.8s;
}

.turn_box_number {
  line-height: 100rpx;
  font-size: 66rpx;
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: #4898F1;
  text-align: center;
}

taro版

import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { AtNavBar } from 'taro-ui'
import Taro from '@tarojs/taro'
import "taro-ui/dist/style/components/nav-bar.scss" // 按需引入
import "taro-ui/dist/style/components/icon.scss" // 按需引入

import './index.css'

export default class Index extends Component {
  constructor() {
    super(...arguments)
    this.state = ({
      listAll: [1, 2, 3, 4]
    })
  }
  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    const { listAll } = this.state
    return (
      <View>
        <AtNavBar
          border='fasle'
          onClickLeftIcon={this.handleClick.bind(this)}
          color='#000'
          title='测试页'
          leftIconType ='chevron-left'
        />
        <View onClick={this.handleClick.bind(this)}>变化数字</View>
        <View style="margin: 10rpx">
          {
            listAll.map((item) => {
              return (
                <View className="turn_box_container" style="width: 80rpx; height: 100rpx;">
                  <View className="turn_box" style={ 'top:' + ( -1 * item * 100) +'rpx' }> 
                    <View className="turn_box_number">0</View>
                    <View className="turn_box_number">1</View>
                    <View className="turn_box_number">2</View>
                    <View className="turn_box_number">3</View>
                    <View className="turn_box_number">4</View>
                    <View className="turn_box_number">5</View>
                    <View className="turn_box_number">6</View>
                    <View className="turn_box_number">7</View>
                    <View className="turn_box_number">8</View>
                    <View className="turn_box_number">9</View>
                  </View>
              </View>
              )
            })
          }
         

        </View>
       
      </View>
    )
    
  }
  // 模拟测试数据
  getNumber(){
    let random = Math.floor(Math.random() * (100000- 1) + 1)
    console.log(random)
    
    let randomString = random.toString()
    let arr = []
    for (var i = 0, len = randomString.length; i < len; i += 1) {
      arr.push(randomString.charAt(i))
    }
    this.setState({
      listAll: arr
    })
  }
  run() {
    this.getNumber()
  }
  handleClick() {
    this.run()
  }
}

react版

import { Component } from 'react'

import './index.css'

export default class Index extends Component {
  constructor() {
    super(...arguments)
    this.state = ({
      listAll: [1, 2, 3, 4]
    })
  }
  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    const { listAll } = this.state
    return (
      <div>
        <div onClick={this.handleClick.bind(this)}>变化数字</div>
        <div style="margin: 10rpx">
          {
            listAll.map((item) => {
              return (
                <div className="turn_box_container" style="width: 80rpx; height: 100rpx;">
                  <div className="turn_box" style={ 'top:' + ( -1 * item * 100) +'rpx' }> 
                    <div className="turn_box_number">0</div>
                    <div className="turn_box_number">1</div>
                    <div className="turn_box_number">2</div>
                    <div className="turn_box_number">3</div>
                    <div className="turn_box_number">4</div>
                    <div className="turn_box_number">5</div>
                    <div className="turn_box_number">6</div>
                    <div className="turn_box_number">7</div>
                    <div className="turn_box_number">8</div>
                    <div className="turn_box_number">9</div>
                  </div>
              </div>
              )
            })
          }
         
        </div>
       
      </div>
    )
    
  }
  // 模拟测试数据
  getNumber(){
    let random = Math.floor(Math.random() * (100000- 1) + 1)
    console.log(random)
    
    let randomString = random.toString()
    let arr = []
    for (var i = 0, len = randomString.length; i < len; i += 1) {
      arr.push(randomString.charAt(i))
    }
    this.setState({
      listAll: arr
    })
  }
  run() {
    this.getNumber()
  }
  handleClick() {
    this.run()
  }
}

总结

也没啥总结的...