微信小程序数字滚动效果

效果图

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

相关推荐
石金龙21 小时前
[译] Composition in CSS
前端·css
天天扭码21 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 天前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪1 天前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy2 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy2 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
墨渊君2 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
小帆聊前端2 天前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css