超实用！微信小程序实现四人/三人比赛积分统计全攻略

好的，我将帮助你编写一个微信小程序页面，用于实现比赛积分统计功能。以下是 `index.wxml`, `index.wxss`, `index.json`, 和 `index.ts` 四个文件的代码。 index.wxml ```html <view class="container"> <view class="mode-selector"> <button bindtap="selectMode" data-mode="4">四人比赛</button> <button bindtap="selectMode" data-mode="3">三人比赛</button> </view> <block wx:if="{{modeSelected}}"> <view class="input-names"> <view>请输入玩家名称：</view> <input v-for="(name, index) in playerNames" :key="index" placeholder="玩家名称" bindinput="onNameInput" data-index="{{index}}"/> </view> <view class="scores-display"> <view>当前积分统计：</view> <view v-for="(player, index) in players" :key="index" :style="'color: ' + colors[index]"> {{player.name}}: {{player.score}} </view> </view> <view class="input-ranks"> <view>请输入本轮名次：</view> <input v-for="(rank, index) in ranks" :key="index" placeholder="第几名" bindinput="onRankInput" data-index="{{index}}"/> <button bindtap="submitRanks">确定</button> </view> <view class="multiplier-selector"> <view>积分倍数选择：</view> <picker mode="selector" range="{{multipliers}}" bindchange="onMultiplierChange"> <view class="picker">{{multipliers[multiplierIndex]}}</view> </picker> </view> </block> </view> ``` index.wxss ```css .container { display: flex; flex-direction: column; align-items: center; padding: 20px; } .mode-selector button { margin: 10px; } .input-names, .scores-display, .input-ranks, .multiplier-selector { margin: 10px 0; text-align: center; } .input-names input, .input-ranks input { width: 200px; height: 40px; margin: 5px; padding: 10px; border-radius: 5px; border: 1px solid #ccc; } .scores-display view { margin: 5px; } .multiplier-selector picker { width: 100px; } ``` index.json ```json { "navigationBarTitleText": "比赛积分统计", "enablePullDownRefresh": false, "backgroundColor": "#FFFFFF", "backgroundTextStyle": "light" } ``` index.ts ```typescript import { Component } from 'miniprogram-component'; @Component({ properties: {}, data: { modeSelected: false, mode: 4, playerNames: [''] as string[], players: [] as any[], ranks: [0, 0, 0, 0], multipliers: ['1倍', '2倍', '3倍', '4倍', '5倍'], multiplierIndex: 0, colors: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'] }, methods: { selectMode(e: any) { this.setData({ mode: parseInt(e.currentTarget.dataset.mode), modeSelected: true }); if (this.data.mode === 4) { this.setData({ playerNames: ['', '', '', ''] }); } else { this.setData({ playerNames: ['', '', ''] }); } }, onNameInput(e: any) { const index = e.currentTarget.dataset.index; const names = this.data.playerNames; names[index] = e.detail.value; this.setData({ playerNames: names }); }, onRankInput(e: any) { const index = e.currentTarget.dataset.index; const ranks = this.data.ranks; ranks[index] = parseInt(e.detail.value); this.setData({ ranks: ranks }); }, submitRanks() { if (!this.checkRanks()) return; const scores = this.calculateScores(this.data.ranks); // 更新积分 for (let i = 0; i < this.data.players.length; i++) { this.data.players[i].score += scores[i] * (this.data.multiplierIndex + 1); } this.setData({ players: this.data.players, ranks: [0, 0, 0, 0] }); }, checkRanks() { const ranks = this.data.ranks; const uniqueRanks = new Set(ranks); if (uniqueRanks.size !== ranks.length) { wx.showToast({ title: '名次不能重复', icon: 'none' }); return false; } return true; }, calculateScores(ranks: number[]) { const scores = []; for (let rank of ranks) { switch (rank) { case 1: scores.push(6); break; case 2: scores.push(-1); break; case 3: scores.push(-2); break; case 4: scores.push(-3); break; default: scores.push(0); } } return scores; }, onMultiplierChange(e: any) { this.setData({ multiplierIndex: e.detail.value }); } }, lifetimes: { attached() { this.setData({ players: this.data.playerNames.map(name => ({ name, score: 0 })) }); } } }) export default Component; ``` 说明 1. index.wxml 文件包含页面的基本结构和按钮事件绑定。 2. index.wxss 文件定义了页面的样式。 3. index.json 文件配置了页面的基本属性。 4. index.ts 文件实现了页面的逻辑和事件处理。 这个示例应该能满足你的需求，你可以根据实际需求进行调整。 ######[AI写代码神器 | 1335点数解答 | 2024-10-02 11:20:04]