帮我写一个uniapp抽奖代码
时间: 2023-12-26 19:03:21 浏览: 85
当然可以帮您写一个uniapp抽奖代码!以下是一个简单的示例代码:
首先,在`pages`文件夹下新建一个`lottery`文件夹,并在该文件夹下新建一个`index.vue`文件。
```vue
<template>
<view class="container">
<button @click="startLottery" v-if="!isLotteryRunning">开始抽奖</button>
<view v-else>
<text>{{ winner }}</text>
<button @click="resetLottery">重新抽奖</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLotteryRunning: false,
participants: ['参与者1', '参与者2', '参与者3', '参与者4'], // 参与者名单
winner: '', // 中奖者
};
},
methods: {
startLottery() {
this.isLotteryRunning = true;
this.winner = ''; // 清空中奖者
const len = this.participants.length;
const randomIndex = Math.floor(Math.random() * len);
this.winner = this.participants[randomIndex];
},
resetLottery() {
this.isLotteryRunning = false;
},
},
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
```
这段代码实现了一个简单的抽奖功能。通过点击“开始抽奖”按钮,随机选取参与者名单中的一个人作为中奖者,并显示在页面上。如果想重新抽奖,点击“重新抽奖”按钮即可。
请将上述代码保存到对应的文件中,并在`main.js`中注册该页面。
希望这个示例能帮到您!如果有其他问题,请随时提问。
阅读全文