只有index界面所以直接
1，wxml
<view class="container">
<view class="dice-area">
<image class="dice" src="{{diceImage}}" bindtap="rollDice" />
</view>
<view class="result">{{result}}</view>
</view>
2，wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.dice-area {
margin-bottom: 30px;
}
.dice {
width: 200px;
height: 200px;
}
.result {
font-size: 28px;
color: #333;
}
3，js
Page({
data: {
diceImage: '/images/dice-1.png',
result: '',
diceList: ['/images/dice-1.png', '/images/dice-2.png', '/images/dice-3.png', '/images/dice-4.png', '/images/dice-5.png', '/images/dice-6.png']
},
rollDice: function() {
const index = Math.floor(Math.random() * this.data.diceList.length);
const diceImage = this.data.diceList[index];
const result = `点数为：${index + 1}`;
this.setData({
diceImage: diceImage,
result: result
});
}
})
这些你看自己的情况可以换成其他照片原理就生成随机数文章来源：https://www.toymoban.com/news/detail-536849.html
文章来源地址https://www.toymoban.com/news/detail-536849.html
到了这里，关于扔骰子微信小程序案例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
