更新记录

1.0.1（2025-12-04） 下载此版本

lx-cubes 正方体组件

一个支持多平台（H5、微信小程序、支付宝小程序）的3D正方体组件，支持手势拖动旋转。

功能特性

平台兼容性

lx-cubes 正方体组件

一个支持多平台（H5、微信小程序、支付宝小程序）的3D正方体组件，支持手势拖动旋转。

功能特性

• 🎯 支持多平台：H5、微信小程序、支付宝小程序
• 🎮 支持手势拖动旋转
• 🎨 支持自定义每个面的颜色和内容
• ⚙️ 支持自动旋转
• 🎯 支持调整旋转速度和初始角度
• 📱 响应式设计

使用方法

基本用法

<template>
  <view>
    <lx-cubes :size="200" />
  </view>
</template>

<script>
import lxCubes from '@/uni_modules/lx-cubes/lx-cubes.vue'

export default {
  components: {
    lxCubes
  }
}
</script>

自定义内容

<template>
  <view>
    <lx-cubes :size="200">
      <template #front>
        <text>前面内容</text>
      </template>
      <template #back>
        <text>后面内容</text>
      </template>
      <template #right>
        <text>右面内容</text>
      </template>
      <template #left>
        <text>左面内容</text>
      </template>
      <template #top>
        <text>上面内容</text>
      </template>
      <template #bottom>
        <text>下面内容</text>
      </template>
    </lx-cubes>
  </view>
</template>

高级配置

<template>
  <view>
    <lx-cubes 
      :size="250"
      :rotateX="-20"
      :rotateY="30"
      :rotateSpeed="0.8"
      :autoRotate="true"
      front-color="rgba(255, 99, 71, 0.8)"
      back-color="rgba(135, 206, 235, 0.8)"
      right-color="rgba(144, 238, 144, 0.8)"
      left-color="rgba(255, 215, 0, 0.8)"
      top-color="rgba(238, 130, 238, 0.8)"
      bottom-color="rgba(255, 140, 0, 0.8)">
    </lx-cubes>
  </view>
</template>

Props

插槽

组件方法

通过ref可以调用以下方法：

// 获取组件引用
const cube = this.$refs.cube

// 重置旋转角度
cube.resetRotation()

// 设置旋转角度
cube.setRotation(x, y)  // x: X轴角度, y: Y轴角度

// 获取当前旋转角度
const rotation = cube.getRotation()  // 返回 {x, y}

交互操作

移动端

• 触摸并拖动来旋转正方体

H5端

• 鼠标按下并拖动来旋转正方体

平台兼容性

微信小程序优化

组件已针对微信小程序进行了特殊优化：

1. 兼容性处理：添加了必要的厂商前缀和兼容性CSS
2. 触摸事件优化：安全地处理触摸事件，避免报错
3. 3D变换适配：使用微信小程序支持的3D变换方式
4. 性能优化：移除可能导致性能问题的复杂动画

在微信小程序中使用时，组件会自动应用兼容性优化，确保正常运行。

技术实现

• 使用 CSS3 transform-style: preserve-3d 实现3D效果
• 通过 touch 事件和 mouse 事件实现拖动交互
• 使用条件编译确保多平台兼容性
• 支持插槽自定义每个面的内容

注意事项

1. 在小程序中使用时，确保已开启3D变换支持
2. 建议为每个面设置合适的背景色以增强3D效果
3. 自动旋转功能在移动设备上可能会影响性能，请根据需要开启
4. 组件大小建议设置在 100-400 像素之间以获得最佳显示效果
5. 组件已包含参数验证，确保传入的值在合理范围内
6. 支持自定义边框显示和边框颜色
7. 内置多平台兼容性处理，包括微信小程序和支付宝小程序

新版本特性

v1.1.0

• ✅ 新增自动旋转速度控制
• ✅ 新增边框显示控制和自定义颜色
• ✅ 新增组件方法：重置、设置和获取旋转角度
• ✅ 增强参数验证，提高稳定性
• ✅ 优化移动端兼容性
• ✅ 改进插槽内容，支持更丰富的自定义内容
• ✅ 增强性能优化和错误处理
• ✅ 完善的JSDoc注释，提升开发体验
• ✅ 微信小程序深度兼容性优化
• ✅ 统一组件接口，简化使用方式

示例项目

项目中的 pages/index/index.vue 提供了完整的使用示例，包括：

• 基本使用方法
• 自定义内容插槽
• 控制按钮（自动旋转、重置角度）
• 美观的UI样式

可以直接运行项目查看效果。