当前位置：首页 > news >正文

微信小程序数字滚动效果

news 来源：原创 2025/6/9 6:02:08

效果图

请添加图片描述

.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，很少看博客，对你有帮助别忘记点赞收藏。