当前位置：首页 > uni-app

uniapp 摇骰子

2026-02-05 19:57:46uni-app

实现摇骰子功能的方法

在UniApp中实现摇骰子功能，可以通过结合动画效果和随机数生成来模拟真实的骰子滚动效果。以下是具体实现步骤：

1. 页面布局设计 在pages目录下新建页面，添加骰子容器和触发按钮的布局代码：

uniapp 摇骰子

<template>
  <view class="container">
    <view class="dice" :animation="animationData">{{diceValue}}</view>
    <button @click="rollDice">摇骰子</button>
  </view>
</template>

2. 样式设置 添加基础样式使骰子可视化：

.dice {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  margin: 50px auto;
}

3. 逻辑实现 在脚本部分实现骰子动画和随机数生成：

uniapp 摇骰子

export default {
  data() {
    return {
      animationData: {},
      diceValue: 1
    }
  },
  methods: {
    rollDice() {
      const animation = uni.createAnimation({
        duration: 1000,
        timingFunction: 'ease'
      })

      // 旋转动画
      animation.rotateX(360).rotateY(360).step()
      this.animationData = animation.export()

      // 随机生成骰子点数
      setTimeout(() => {
        this.diceValue = Math.floor(Math.random() * 6) + 1
      }, 1000)
    }
  }
}

4. 增强效果 添加震动反馈提升用户体验：

rollDice() {
  // 添加震动效果
  uni.vibrateShort({})

  // 原有动画代码...
}

5. 多骰子版本 如需实现多个骰子同时滚动：

<view v-for="(dice, index) in dices" :key="index" class="dice" :animation="animationData[index]">
  {{dice.value}}
</view>

data() {
  return {
    dices: [
      {value: 1},
      {value: 1},
      {value: 1}
    ],
    animationData: []
  }
},
methods: {
  rollDice() {
    this.dices.forEach((dice, index) => {
      const anim = uni.createAnimation({
        duration: 1000,
        timingFunction: 'ease'
      })
      anim.rotateX(360).rotateY(360).step()
      this.animationData[index] = anim.export()

      setTimeout(() => {
        this.dices[index].value = Math.floor(Math.random() * 6) + 1
      }, 1000)
    })
  }
}