只有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 = `點數(shù)為：${index + 1}`;
this.setData({
diceImage: diceImage,
result: result
});
}
})
這些你看自己的情況可以換成其他照片原理就生成隨機數(shù)文章來源：http://www.zghlxwxcb.cn/news/detail-536849.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-536849.html
到了這里，關于扔骰子微信小程序案例的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
