小程序数字滚动效果

 效果图

wxml



{{item.val}}


{{num}}
{{num}}





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) {
console.log(111)
// 监听value变化，格式化为valArr
let valArr = []
if (newVal) {
valArr = newVal.split('').map(o => {
return { val: o, isNaN: isNaN(o)}
})
}
this.setData({
valArr: valArr
})
console.log(valArr)
this.getNumberHeight()
}
},
methods: {
/** 计算数字高度 */
getNumberHeight() {
let _that = this;
console.log(666)
if (this.data.itemHeight > 0) {
this.startScrollAni()
return
}
wx.createSelectorQuery().selectAll('.scroll-number').boundingClientRect(function (rect) {
console.log(rect)
_that.setData({
itemHeight: rect[0].height
})
_that.startScrollAni()
}).exec()
},
/** 开始滚动动画 */
startScrollAni() {
console.log(1111)
console.log(this.data.itemHeight)
if (this.data.itemHeight <= 0) return
const aniArr = []
this.data.valArr.forEach((item, index) => {
console.log(999)
if(!item.isNaN) {
console.log(999)
aniArr.push(`transition-delay: ${this.data.delay * index}ms; top: ${-this.data.itemHeight * (this.data.numArr[parseInt(item.val)] + 10)}px;`)
} else {
console.log(999555)
aniArr.push(null)
}
})
console.log(aniArr)
this.setData({
aniArr: aniArr
})
}
},
ready:function(){
this.setData({
value:1560,
duration:500,
delay:200
})
}
})

css

/* pages/ceshi/index.wxss */
.scroll-number {
display: flex;
align-items: flex-end;
height: 72rpx;
}
.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;
}