微信小程序数字滚动效果

效果图

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

相关推荐
HERR_QQ5 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
孤水寒月9 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
mg66813 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳14 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww12117 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero18 小时前
微信小程序41~50
微信小程序·小程序
呆呆的心19 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
AA-代码批发V哥20 小时前
CSS之布局详解指南
css
拾光拾趣录1 天前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter1 天前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css