uniapp篮球记分牌

以下是一个简单的uniapp篮球记分牌的实现方法：

1. 在uniapp项目中创建一个新页面，例如Scoreboard.vue。

2. 在Scoreboard.vue中添加以下代码：

<template>
  <view class="container">
    <view class="team">
      <view class="name">{{ team1Name }}</view>
      <view class="score">{{ team1Score }}</view>
    </view>
    <view class="team">
      <view class="name">{{ team2Name }}</view>
      <view class="score">{{ team2Score }}</view>
    </view>
    <view class="buttons">
      <button class="button" @click="addScore(1, 1)">+1</button>
      <button class="button" @click="addScore(1, 2)">+2</button>
      <button class="button" @click="addScore(1, 3)">+3</button>
      <button class="button" @click="addScore(2, 1)">+1</button>
      <button class="button" @click="addScore(2, 2)">+2</button>
      <button class="button" @click="addScore(2, 3)">+3</button>
      <button class="button" @click="resetScore">Reset</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      team1Name: 'Team 1',
      team2Name: 'Team 2',
      team1Score: 0,
      team2Score: 0
    }
  },
  methods: {
    addScore(team, score) {
      if (team === 1) {
        this.team1Score += score
      } else if (team === 2) {
        this.team2Score += score
      }
    },
    resetScore() {
      this.team1Score = 0
      this.team2Score = 0
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.name {
  font-size: 24px;
  font-weight: bold;
}

.score {
  font-size: 48px;
  font-weight: bold;
}

.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 24px;
  font-weight: bold;
  border-radius: 10px;
  background-color: #007aff;
  color: #fff;
}
</style>

3. 在Scoreboard.vue中，我们定义了两个队伍的名称和得分，以及加分和重置按钮的功能。当用户点击加分按钮时，我们将根据所选的队伍和分数来更新得分。当用户点击重置按钮时，我们将重置得分为零。

4. 在样式中，我们定义了一个简单的布局，包括两个队伍的名称和得分，以及加分和重置按钮。