前言

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

实现效果

实现逻辑

第一步，把数字显示出来

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

第三步，移动数字也就是修改定位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)实现数字翻动(滚动)效果相关推荐

android开发游记：仿支付宝余额数字累加滚动效果的实现
支付宝更新9.0后,细心的朋友会发现新增了一个动画效果,就是进入我的钱包的时候,我的余额会有一段滚动显示的动画效果,比如说你有100块,余额就从0滚动到100,看到自己的钱在不断涨,让我们这些穷屌丝莫 ...
原生js实现大屏数字上下滚动效果，支持随机多位数字
一文看懂大屏数字滚动前言一.html 二.js生成展示的元素三.css实现样式四.加入动画和定时器前言在大屏项目中经常需要实现那种数字上下滚动的效果,普通的数字随机滚动在UI组件(例如Vi ...
css数字/文字滚动效果
效果: 原理利用伪类,开始的时候给本来的内容盖住,然后执行动画. 设置宽高,宽就是单个内容(比如数字中的一位数)的宽,让内容一行一个的排成列. 动画就是让这些内容一个个的往上升,造成一种滚动效果最 ...
js，jq html css 实现数字上下滚动效果
文章目录使用方法一.gScrollNumber.js是什么? 二.使用步骤 1.引入库 2.效果截图使用方法用于数字屏更新滚动效果. 一.gScrollNumber.js是什么? 用来使数字能 ...
Js实现数字动态滚动效果
生成gif后有点卡顿,实际上是很流畅的. 完整代码如下 DOM <!DOCTYPE html> <html> <head><title></tit ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
vue 大屏数字上下滚动
vue 大屏数字上下滚动效果就是有数字变动时,会有一个动画跳到相应的数字,是上下滚动的那种. <div class="chartNum"><div class= ...
Taro(React)实现具有滚动效果的倒数计时器
Taro(React)实现具有滚动效果的倒数计时器 Taro获取节点方法的封装 import Taro from "@tarojs/taro"; import { NodesRef ...
html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 思路在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤, ...

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

前言

实现效果

实现逻辑

实现代码

总结

react(taro)实现数字翻动(滚动)效果相关推荐

最新文章

热门文章