当前位置：首页 > uni-app

投票 uniapp

2026-02-05 19:10:38uni-app

在Uniapp中实现投票功能

前端页面设计

使用<radio>或<checkbox>组件创建单选/多选投票选项，结合v-for动态渲染选项列表。示例代码：

<template>
  <view>
    <radio-group @change="handleVote">
      <view v-for="(item, index) in options" :key="index">
        <radio :value="item.id" /> {{ item.text }}
      </view>
    </radio-group>
    <button @click="submitVote">提交投票</button>
  </view>
</template>

数据绑定与事件处理

在<script>中定义投票选项和提交逻辑：

export default {
  data() {
    return {
      options: [
        { id: 1, text: "选项A" },
        { id: 2, text: "选项B" }
      ],
      selectedId: null
    };
  },
  methods: {
    handleVote(e) {
      this.selectedId = e.detail.value;
    },
    submitVote() {
      if (!this.selectedId) {
        uni.showToast({ title: "请选择选项", icon: "none" });
        return;
      }
      // 调用后端API提交数据
      uni.request({
        url: "https://your-api.com/vote",
        method: "POST",
        data: { optionId: this.selectedId },
        success: () => uni.showToast({ title: "投票成功" })
      });
    }
  }
};

后端接口与数据存储

假设使用Node.js + MySQL处理投票数据：

API设计：创建接收投票数据的接口（如POST /vote），验证用户身份（防止重复投票）。
数据库操作：更新选项的票数字段。示例SQL：
```
UPDATE vote_options SET count = count + 1 WHERE id = ?;
```

实时结果展示

通过uni.request定时拉取或WebSocket实现结果更新。前端展示可使用<progress>组件：

投票 uniapp

<view v-for="item in results" :key="item.id">
  <text>{{ item.text }} ({{ item.count }}票)</text>
  <progress :percent="(item.count / total) * 100" />
</view>