微信小程序数字滚动效果

效果图

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

相关推荐
前端Hardy18 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy18 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
toooooop819 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
前端Hardy19 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全19 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
心一信息21 小时前
ThreeJS骨骼示例
css·css3·html5
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾1 天前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
jason_yang1 天前
基于BEM规范实现ElementPlus组件
css·scss
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物