需求描述
微信小程序做滚动变化的数字，效果
涉及到知识点
小程序节点操作、节点选择器
小程序 setData给数组复制
动态的绑定动画：这里用数组存储所有动画 在不确定绑定动画dom有多少时， for循环出来的view绑定不同animation
wxml
```swift
<view class="scroll-data" wx:for="{{len}}" >
<view class="scroll-num" animation="{{animation[index]}}" >
<text class="unit-num">0</text>
<text class="unit-num">1</text>
<text class="unit-num">2</text>
<text class="unit-num">3</text>
<text class="unit-num">4</text>
<text class="unit-num">5</text>
<text class="unit-num">6</text>
<text class="unit-num">7</text>
<text class="unit-num">8</text>
<text class="unit-num">9</text>
</view>
// 这里效果要求有千分号 如果不需要可以删除
<view class="commachar" wx:if="{{((len-(index+1))%3===0) && index < len-1}}">,</view>
</view>
```
wxss
具体样式科自行调整
```swift
.scroll-data{
line-height: 42rpx;
height: 42rpx;
font-size: 38rpx;
overflow: hidden;
display: inline-block;
position: relative;
color: #fff;
}
.scroll-num{
width:26rpx;
display:inline-block;
position: relative;
top:0rpx;
}
.unit-num{
height: 42rpx;
overflow: hidden;
display: block;
}
.commachar{
width:26rpx;
display:inline-block;
position: relative;
vertical-align: top;
}
```
js
```swift
// 这里只写了核心函数 显示 数字 n （可以是任意位数的数字）
show_num(n){
var len = String(n).length;
this.setData({
len: len,
})
var char = String(n).split("")
// h存储数字块高度
var h = ''
let self = this
// 创造节点选择器
wx.createSelectorQuery().select('.unit-num').boundingClientRect(function(rect){
h = rect.height
// 这里用数组存储所有动画 方便for循环出来的view绑定不同animation
var animate = []
for(var i=0;i<len;i++){
animate[i] = wx.createAnimation()
animate[i].top(-parseInt(h)*char[i]).step({
duration:1500
})
// 这里数组变量赋值
var deletedtodo='animation['+i+']';
self.setData({
//输出动画
[deletedtodo]: animate[i].export()
})
}
}).exec()
},
```
