微信小程序抽签完整代码

以下是一个微信小程序的简单实现，它可以随机抽取“吃什么”。包括一个基本的页面，用户可以点击按钮随机抽取一个吃的选项。扫码看效果

1. pages/index/index.js

Page({
  data: {
    foodOptions: ['火锅', '烧烤', '汉堡', '披萨', '日料', '中餐', '西餐', '快餐', '甜品'],
    selectedFood: '还没决定吃什么~',
    animationText: '',
    isRolling: false, // 控制动画状态
  },

  // 随机抽取一个吃的选项
  chooseFood() {
    if (this.data.isRolling) return; // 防止重复点击

    this.setData({ isRolling: true });
    const foodOptions = this.data.foodOptions;
    let animationIndex = 0;

    // 动画效果：快速滚动选项
    const animationInterval = setInterval(() => {
      animationIndex = (animationIndex + 1) % foodOptions.length;
      this.setData({
        animationText: foodOptions[animationIndex],
      });
    }, 100); // 每100ms更新一次

    // 停止滚动并显示最终结果
    setTimeout(() => {
      clearInterval(animationInterval);
      const randomIndex = Math.floor(Math.random() * foodOptions.length);
      this.setData({
        selectedFood: foodOptions[randomIndex],
        animationText: foodOptions[randomIndex],
        isRolling: false,
      });
    }, 3000); // 3秒后停止
  }
});

---

2. pages/index/index.wxml

<view class="container">
  <text class="title">今天吃什么？</text>
  <text class="food">{
  
  {animationText || selectedFood}}</text>
  <button class="button" bindtap="chooseFood" disabled="{
  
  {isRolling}}">
    {
  
  {isRolling ? '正在抽取...' : '随机抽取'}}
  </button>
</view>

---

3. pages/index/index.wxss

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f8f8;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.food {
  font-size: 28px;
  color: #ff5722;
  font-weight: bold;
  margin: 30px 0;
  transition: transform 0.1s; /* 添加轻微变动效果 */
}

.button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
}

.button[disabled] {
  background-color: #a5d6a7;
}