微信小程序中实现价格动画（带小数点）
需求：
- 1.希望价格变动时进行滚动
- 2.希望变动哪位数字就滚动哪位，比如1.23变成1.24那么只有3滚动到4，其他位置不变动
- 3.希望支持小数点
- 4.希望刚进入到时候不要有动画
- 5.希望勾选优惠券的时候才有动画，取消的时候没有动画
实现效果如下
1
2
3
4
5
6
7
8
9
10
11
12
13<!--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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76// components/scroll-number/index.js
Component({
externalClasses: ['container-class', 'item-class', 'dot-class'],
properties: {
value: {
type: String,
value: ''
},
/** 一次滚动耗时 单位ms */
duration: {
type: Number,
value: 1000
},
/** 每个数字之间的延迟滚动 */
delay: {
type: Number,
value: 200
}
},
data: {
valArr: [],
aniArr: [], // 动画列表，和valArr对应
numArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 所有数字
itemHeight: 37 // 数字项的高度 没有高度就会所有位数都变动，所以根据需求，如果想要一进来就所有位数都变动，那么这个值默认为0，如果想要只有个位数变动（价格变化的那位），那么可以通过hidden的方式提前让组件渲染出来或者给itemHeight一个默认值。
},
observers: {
value: function (newVal) {
// 监听value变化，格式化为valArr
let valArr = []
if (newVal) {
valArr = newVal.split('').map(o => {
return { val: o, isNaN: isNaN(o)}
})
}
this.setData({
valArr: valArr
})
this.getNumberHeight()
}
},
methods: {
/** 计算数字高度 */
getNumberHeight() {
console.log(this.properties.value,this.data.itemHeight)
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() {
console.log('开始动画',this.data.itemHeight,this.data.valArr)
if (this.data.itemHeight <= 0) return
const 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
})
}
}
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33/* 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;/* 注意这一行，如果没有，会出现切换快速的时候，动画就不滚动了 */
}