微信小程序 -数字滚动动画

效果图

实现思路

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

项目代码

js文件

// components/scroll-number/index.js
Component({externalClasses: ['container-class', 'item-class', 'dot-class'],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文件

<!--components/scroll-number/index.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;
}

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

微信小程序-通知滚动小提示
代码地址如下: http://www.demodashi.com/demo/14044.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
微信小程序js过度动画
微信小程序js过度动画如有错误还请大神指教.如果觉得不错可以关注我了解更多. 一,我们先来看看效果吧. 二,我们用的是js的逐帧动画,css也可有相同的效果,我们这里用js // pages/arr ...
微信小程序登录页动画-云层漂浮
前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GI动态图) 当我看到这张背景图的时候, ...
IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况第一步第二步当微信小程序页面 ...
微信小程序没登录跳到登录页怎么做_微信小程序登录页动画怎么做
2017年5月22日,微信小程序推出之时,限制非常多,现在越来越开放.微信小程序动画怎么做也受到越来越多人的关注,下面从多个方面来谈谈微信小程序怎么做的一些内容. 前言 2017年前端火了,微信小程序 ...
微信小程序实现滚动到指定位置
微信小程序的按钮点击后滚动到页面内的指定位置. wxml内容 <view class="box1" bindtap="toComment">查看回答 ...
微信小程序之滚动选择器(时间日期选择器)
微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到pick ...

微信小程序 -数字滚动动画

效果图

实现思路

项目代码

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

最新文章

热门文章