uniapp 种树界面

uniapp 种树界面设计思路

界面布局与功能模块 采用绿色为主色调，顶部导航栏显示“环保种树”标题，底部Tab栏包含“首页”“任务”“我的”等入口。主界面分为三部分：用户当前能量值/树苗成长进度、每日任务列表、好友排行榜。

树苗成长可视化 通过Lottie动画实现树苗从种子到成树的动态效果，能量值每达到一定阈值触发成长阶段变化。进度条采用环形设计，中央显示当前能量值/目标值（如“1200/5000”）。

任务系统交互设计 任务卡片包含图标（如水滴、太阳）、任务描述（“步行5000步”）和能量奖励值（+50）。完成的任务显示绿色对勾，未完成的任务带有点击触发按钮。长按任务卡片弹出详情弹窗。

关键代码实现示例

进度条组件（vue文件）

<view class="progress-container">
  <lottie :animationData="treeGrowthAnimation" :loop="false" 
          :progress="energyProgress" class="lottie-animation"/>
  <text class="energy-text">{{currentEnergy}}/{{targetEnergy}}</text>
</view>

样式定义

.progress-container {
  position: relative;
  width: 300rpx;
  height: 300rpx;
}
.energy-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32rpx;
  color: #4a8c4a;
}

数据绑定逻辑

export default {
  data() {
    return {
      currentEnergy: 1200,
      targetEnergy: 5000,
      treeGrowthAnimation: require('@/static/lottie/tree.json')
    }
  },
  computed: {
    energyProgress() {
      return Math.min(this.currentEnergy / this.targetEnergy, 1)
    }
  }
}

性能优化建议

1. 使用image标签的lazy-load属性延迟加载非可视区图片
2. 对树苗动画使用v-if替代v-show减少内存占用
3. 能量值变化时采用CSS过渡动画而非频繁重绘
4. 使用uni.preloadPage预加载任务详情页面

扩展功能实现

好友浇水互动 通过WebSocket实现实时通知，当好友帮忙浇水时触发振动反馈（uni.vibrate()）和弹窗提示。浇水记录存储在云数据库的watering_log集合中，包含时间戳和用户ID。

成就系统设计 在onShow生命周期中检查成就解锁条件，如：

checkAchievement() {
  const totalEnergy = this.$store.state.totalEnergy
  if(totalEnergy > 10000 && !this.achievements.fullGrown) {
    uni.showModal({
      title: '成就解锁',
      content: '获得【参天大树】成就！'
    })
  }
}