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 (
      
        
        变化数字
        
          {
            listAll.map((item) => {
              return (
                
                   
                    0
                    1
                    2
                    3
                    4
                    5
                    6
                    7
                    8
                    9
                  
              
              )
            })
          }
         

        
       
      
    )
    
  }
  // 模拟测试数据
  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 (
      

        
变化数字
        

          {
            listAll.map((item) => {
              return (
                

                  
 
                    
0
                    
1
                    
2
                    
3
                    
4
                    
5
                    
6
                    
7
                    
8
                    
9
                  
              
              )
            })
          }
         
        
       
      
    )
    
  }
  // 模拟测试数据
  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()
  }
}

总结

也没啥总结的...