更新记录

1.1.2（2026-01-02） 下载此版本

修复ios上传图片不显示的问题

1.1.1（2025-12-10） 下载此版本

优化体验

1.0.9（2025-11-21） 下载此版本

代码优化

平台兼容性

uni-app(4.81)

molu-fitting 虚拟试衣间组件

介绍

molu-fitting 是一个功能丰富的虚拟试衣间组件，支持布料选择、模特选择、布料位置调整、自定义布料上传等功能，为用户提供沉浸式的虚拟试衣体验。

功能特点

• ✅ 支持布料选择和预览
• ✅ 支持模特选择和分类
• ✅ 支持布料位置调整（拖拽、缩放）
• ✅ 支持自定义布料上传
• ✅ 支持分享功能
• ✅ 支持海报生成

安装方式

在插件市场中搜索 molu-fitting，点击安装即可。

使用方式

<template>
  <view>
    <molu-fitting 
      :model="modelData" 
      :fabric="fabricData" 
      :poster="posterConfig"
      :is-show-upload="true"
      :is-show-share="true"
      :share-link="shareLink"
      :qr-code-image="qrCode"
      @model-category-change="onModelCategoryChange"
      @load-more-model="loadMoreModel"
      @fabric-category-change="onFabricCategoryChange"
      @fabric-load-more="loadMoreFabric"
      @need-qr-code="getQrCode"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      modelData: {
        categoryId: 0,
        categoryList: [],
        list: [],
        status: {
          empty: false,
          loading: false,
          loadMore: false,
          noMore: false
        }
      },
      fabricData: {
        categoryId: 0,
        categoryList: [],
        list: [],
        status: {
          loading: false,
          loadMore: false,
          noMore: false
        },
        patches: []
      },
      posterConfig: {
        title: '虚拟试衣',
        subtitle: '虚拟试衣小程序',
        description: '用中国的布料，做世界的设计。',
        footerTitle: '虚拟试衣'
      },
      shareLink: '',
      qrCode: ''
    }
  },
  methods: {
    onModelCategoryChange(categoryId) {
      // 处理模特分类变化
      console.log('模特分类变化:', categoryId);
    },
    loadMoreModel() {
      // 加载更多模特
      console.log('加载更多模特');
    },
    onFabricCategoryChange(categoryId) {
      // 处理布料分类变化
      console.log('布料分类变化:', categoryId);
    },
    loadMoreFabric() {
      // 加载更多布料
      console.log('加载更多布料');
    },
    getQrCode() {
      // 获取二维码
      console.log('需要获取二维码');
    }
  }
}
</script>

API 说明

Props

Events

Model 数据结构

{
  categoryId: 0, // 当前分类ID
  categoryList: [ // 分类列表
    {
      id: 1,
      name: '分类1'
    }
  ],
  list: [ // 模特列表
    {
      id: 1,
      image: '模特图片地址'
    }
  ],
  status: {
    empty: false, // 是否为空
    loading: false, // 是否加载中
    loadMore: false, // 是否可以加载更多
    noMore: false // 是否没有更多
  }
}

Fabric 数据结构

{
  categoryId: 0, // 当前分类ID
  categoryList: [ // 分类列表
    {
      id: 1,
      name: '分类1'
    }
  ],
  list: [ // 布料列表
    {
      id: 1,
      image: '布料图片地址'
    }
  ],
  status: {
    loading: false, // 是否加载中
    loadMore: false, // 是否可以加载更多
    noMore: false // 是否没有更多
  },
  patches: [] // 当前已选布料列表
}

Poster 数据结构

{
  title: '虚拟试衣', // 海报标题
  subtitle: '虚拟试衣小程序', // 海报副标题
  description: '用中国的布料，做世界的设计。', // 海报描述
  footerTitle: '虚拟试衣' // 海报底部标题
}

样式自定义

组件使用 SCSS 变量定义样式，支持自定义主题：

常见问题解答

Q: 如何自定义布料？

A: 点击布料选择区的上传按钮，选择本地图片即可添加自定义布料。

Q: 如何调整布料位置？

A: 在模特展示区，长按布料进行拖拽调整位置，双指缩放调整大小。

Q: 如何分享试衣效果？

A: 点击右上角分享按钮，可选择分享链接或生成海报分享。

Q: 如何添加更多模特？

A: 通过 model 属性传入更多模特数据，支持分页加载。

Q: 支持哪些平台？

A: 支持微信小程序、H5、App 等 uni-app 支持的平台。

更新日志

v1.0.0

• 初始版本发布
• 支持布料选择和预览
• 支持模特选择和分类
• 支持布料位置调整
• 支持自定义布料上传
• 支持分享功能
• 支持海报生成

注意事项

1. 确保传入的图片地址可访问
2. 模特图片建议使用透明背景的 PNG 格式，以获得更好的试衣效果
3. 布料图片建议使用高清图片，以获得更清晰的预览效果
4. 分享功能需要配置正确的分享链接
5. 二维码图片需要提前准备好，或通过 need-qr-code 事件动态获取
6. 组件依赖于 uni-app 框架，使用前请确保已正确安装和配置

许可证

MIT License