微信小程序使用数字滚动动画

实现思路

为了实现数字的无限滚动效果，每个数字框的内部，其实包含了两组0~9的view，每个View的高度都一样
数字框内使用绝对定位，通过调整top位置，显示出指定的数字
使用transtion动画，top发生变化时就会滚动，然后通过指定动画的delay、duration，使数字之间延时动画

项目代码

js文件

Component({properties: {value: {type: String,value: ''},/** 一次滚动耗时 单位ms */duration: {type: Number,value: 1600},/** 每个数字之间的延迟滚动 */delay: {type: Number,value: 200}},data: {valArr: [],aniArr: [],  // 动画列表，和valArr对应numArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],  // 所有数字itemHeight: 0  // 数字项的高度},observers: {value: function (newVal) {// 监听value变化，格式化为valArrlet valArr = []if (newVal) {valArr = newVal.split('').map(o => {return { val: o, isNaN: isNaN(o)}})}this.setData({valArr: valArr})this.getNumberHeight()}},methods: {/** 计算数字高度 */getNumberHeight() {if (this.data.itemHeight > 0) {this.startScrollAni()return}const query = this.createSelectorQuery()query.select('.number-item').boundingClientRect()query.exec((res) => {this.setData({itemHeight: res[0].height})this.startScrollAni()})},/** 开始滚动动画 */startScrollAni() {if (this.data.itemHeight <= 0) returnconst aniArr = []this.data.valArr.forEach((item, index) => {if(!item.isNaN) {aniArr.push(`transition-delay: ${this.data.delay * index}ms; top: ${-this.data.itemHeight * (this.data.numArr[parseInt(item.val)] + 10)}px;`)} else {aniArr.push(null)}})this.setData({aniArr: aniArr})}}
})

wxml文件

<view class="scroll-number container-class"><block wx:for="{{valArr}}" wx:key="index"><view wx:if="{{item.isNaN}}" class="scroll-number-item number-dot dot-class">{{item.val}}</view><view wx:else class="scroll-number-item number-item item-class"><view class="scroll-ani" style="transition-duration: {{duration}}ms; {{aniArr[index]}}"><view wx:for="{{numArr}}" wx:for-item="num" wx:for-index="idx" wx:key="idx" class="num{{num}}">{{num}}</view><view wx:for="{{numArr}}" wx:for-item="num" wx:for-index="idx" wx:key="idx" class="num{{num}}">{{num}}</view></view></view></block>
</view>

wxss文件

/* components/scroll-number/index.wxss */
.scroll-number {display: flex;align-items: flex-end;
}
.scroll-number-item {color: #0079FE;font-size: 48rpx;font-weight: bold;margin: 0 24rpx;font-family: Microsoft YaHei;
}
.number-item {background-color: rgba(0, 121, 254, 0.2);border-radius: 8rpx;width: 56rpx;height: 72rpx;line-height: 72rpx;overflow: hidden;text-align: center;position: relative;
}
.number-dot {margin: 0 12rpx;
}
.scroll-ani {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: all 2s ease-in-out 0s;
}

在这里，我是做了一个封装的组件，调用方式如下

SumPrice是指最终跳动停止的数值

 <donation-transtion value="{{SumPrice}}"></donation-transtion>

微信小程序使用数字滚动动画相关推荐

微信小程序页面上下滚动、左右滑动（二）
系列文章目录微信小程序页面上下滚动.左右滑动(一) 文章目录系列文章目录前言项目结构解决问题1 1.pretest页面 2.test页面解决问题2 总结参考前言在上一篇文章,讲解了再 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序实现文字滚动
微信小程序实现文字滚动 1.wxml <view class="container"><view class='list' animation="{{a ...
微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
php小程序 100行左右,微信小程序左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类右侧顶部分类右侧列表 .flex_row{display: flex;flex-dire ...
零基础也能学会的微信小程序制作横向滚动布局
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 最终效果: <! ...
小程序如何做成html的滚动字幕,微信小程序实现文字滚动
本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: 显示完后再显示: {{text}} 出现白边后即显示: {{text}} {{text}} wxss: .e ...
微信小程序各种酷炫动画
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/anda0109/article/de ...

微信小程序使用数字滚动动画

实现思路

项目代码

wxml文件

wxss文件

在这里，我是做了一个封装的组件，调用方式如下

微信小程序使用数字滚动动画相关推荐

最新文章

热门文章