数字滚动组件,用于数字的动态效果展示。今天用APICloud AVM框架打造数字滚动组件。
组件中用到的核心功能点是,background-position属性设置背景图像的起始位置。每个数字占位的背景图片是一个0-9数字组成的图片,通过随机产生不同的图片其实位置来展示不同的数字。
通过延迟产生每次的位置,来控制数字切换的频率,这个是可以自定义的。
可自定义数字其实位置,靠左,靠右,居中。
可自定义展示的数字个数。
组件文件
count-up.stml
.easy-count-up_container{ width: 100%; padding: 5px; background-color: #ffffff; } .easy-count-up_img{ height: 47px; flex-flow: row nowrap; } .easy-count-up_img-item{ width: 33px; height: 47px; margin-right: 5px; background-image: url(https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png); transition: all 800ms ease 0s; background-repeat: no-repeat; }组件使用
demo-count-up.stml
.page { height: 100%; background-color: #f0f0f0; justify-content: flex-start; align-items: center; }