Vue实现苹果手表

Vue实现苹果手表界面

使用Vue实现苹果手表界面主要涉及UI组件开发、动画效果和交互逻辑。以下是关键实现方法：

界面结构搭建

创建基础Vue组件结构，使用flex布局实现圆形表盘：

<template>
  <div class="apple-watch">
    <div class="watch-face">
      <div class="digital-time">{{ currentTime }}</div>
      <div class="complications">
        <div v-for="(comp, index) in complications" :key="index" class="complication">
          {{ comp.value }}
        </div>
      </div>
    </div>
  </div>
</template>

动态时间显示

在Vue组件中添加实时时间更新逻辑：

data() {
  return {
    currentTime: '',
    timer: null
  }
},
mounted() {
  this.updateTime()
  this.timer = setInterval(this.updateTime, 1000)
},
methods: {
  updateTime() {
    const now = new Date()
    this.currentTime = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
  }
},
beforeDestroy() {
  clearInterval(this.timer)
}

样式实现

添加CSS实现圆形表盘效果：

.apple-watch {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #000;
  position: relative;
  overflow: hidden;
}

.watch-face {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  margin: 5%;
  background: radial-gradient(circle, #1a1a1a, #000);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.digital-time {
  color: white;
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 20px;
}

复杂功能实现

添加表盘复杂功能显示：

data() {
  return {
    complications: [
      { name: 'heart', value: '72' },
      { name: 'steps', value: '8,542' },
      { name: 'weather', value: '22°' }
    ]
  }
}

交互功能

实现数字表冠旋转交互：

mounted() {
  const watchFace = document.querySelector('.apple-watch')
  watchFace.addEventListener('wheel', this.handleScroll)
},
methods: {
  handleScroll(e) {
    e.preventDefault()
    const delta = Math.sign(e.deltaY)
    this.complications.forEach(comp => {
      if(comp.name === 'steps') {
        comp.value = parseInt(comp.value.replace(',','')) + delta * 100
      }
    })
  }
}

动画效果

添加CSS动画实现流畅的界面过渡：

.complication {
  transition: transform 0.3s ease;
}

.complication:hover {
  transform: scale(1.1);
}

通过以上方法可以构建基本的苹果手表界面效果，可根据需求进一步扩展功能如健康数据监测、通知中心等模块。