微信小程序数字滚动效果

效果图

.wxml

<view class="container">
<view class="container-num" wx:for="{{number}}" wx:key="index">
<view class="num-container" style="–h:{{h}}px;–y:{{-item * h }}px;">
<view wx:for="{{10}}" wx:key="index" class="num-item">
{{index}}
</view>
</view>
</view>
</view>
<button bind:tap="getRandomNum">生成随机数</button>

.js

Page({
data: {
number:'0',
h:30,
},
getRandomNum(){
const num = `${Math.floor(Math.random() * 1000)}`;
this.setData({
number:num
})
}
})

.wxss

.container{
padding: 100rpx 0;
display: flex;
justify-content: center;
}
.container-num{
overflow: hidden;
}
.num-container{
height: var(–h);
transform:translateY(var(–y));
transition-duration: 1s;
margin: 0 1px;
}
.num-item{
height: var(–h);
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
}

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。