微信小程序数字滚动效果

效果图

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

相关推荐
ZzMemory1 小时前
深入了解 module.css:前端样式管理的有效方案
前端·css·面试
程知农2 小时前
uniapp_微信小程序_根据胶囊按钮计算出的导航栏高度为什么不是44px?
微信小程序·小程序·uni-app
鲲鹏猿5 小时前
微信小程序——早餐小程序
微信小程序·小程序
Dream耀6 小时前
CSS过渡 vs 动画:都有哪些技巧
前端·css
The_era_achievs_hero6 小时前
UniappDay04
vue.js·微信小程序·uni-app
老虎062719 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
拾光拾趣录19 小时前
Flexbox 布局:从“垂直居中都搞不定”到写出响应式万能布局
前端·css
编程猪猪侠21 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
Sherry0071 天前
CSS Grid 交互式指南(译)(下)
css·面试
郭邯1 天前
小程序中自定义组件的样式隔离
微信小程序