前言

因為公司業務需要，數字發生變化的時候就翻動數字進行變化，要有動畫效果....

實現效果

實現邏輯

第一步，把數字顯示出來

?第二步，只顯示單個數字，也就是溢出隱藏設置對應的寬高

?第三步，移動數字也就是修改定位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.statereturn (<View><AtNavBarborder='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.statereturn (<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()} }

總結

也沒啥總結的...

總結

以上是生活随笔為你收集整理的react(taro)实现数字翻动(滚动)效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。