更新记录

1.0.0（2025-07-17） 下载此版本

iOS Dropdown 下拉框组件

一个高度还原 iOS 风格的下拉框组件，专为 uni-app 开发。

✨ 特性

平台兼容性

uni-app(4.06)

uni-app x(4.06)

iOS Dropdown 下拉框组件

一个高度还原 iOS 风格的下拉框组件，专为 uni-app 开发。

✨ 特性

• 🎨 完整演示: 包含多种使用场景的完整演示页面
• 📱 iOS 风格: 高度还原 iOS 原生下拉框的视觉效果和交互体验
• 🎯 响应式: 完美适配各种屏幕尺寸和设备
• 🔧 易于集成: 支持完整演示模式和核心组件模式
• 📦 开箱即用: 无需额外配置，直接引用即可使用
• 🚀 独立打包: 完全封装在 uni_modules 中，便于分发

📁 组件结构

uni_modules/ios-dropdown/
├── components/ios-dropdown/
│   ├── ios-dropdown.vue          # 主组件（完整演示）
│   ├── ios-dropdown-core.vue     # 核心下拉框组件
│   └── example.vue               # 使用示例
├── package.json                  # 组件配置
└── readme.md                    # 说明文档

🚀 快速开始

完整演示模式

直接引用主组件，展示所有功能：

<template>
  <view>
    <ios-dropdown />
  </view>
</template>

<script>
import iosDropdown from '@/uni_modules/ios-dropdown/components/ios-dropdown/ios-dropdown.vue'

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

核心组件模式

使用核心组件进行自定义开发：

<template>
  <view>
    <ios-dropdown-core 
      :options="options" 
      v-model="selectedValue"
      placeholder="请选择选项"
      @change="handleChange"
    />
  </view>
</template>

<script>
import iosDropdownCore from '@/uni_modules/ios-dropdown/components/ios-dropdown/ios-dropdown-core.vue'

export default {
  components: {
    iosDropdownCore
  },
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    }
  },
  methods: {
    handleChange(value, option) {
      console.log('选择了:', value, option)
    }
  }
}
</script>

📋 API 文档

ios-dropdown-core Props

ios-dropdown-core Events

Options 数据格式

[
  {
    label: '显示文本',    // 必需
    value: '选项值',      // 必需
    icon: '图标名称',     // 可选
    disabled: false      // 可选，是否禁用此选项
  }
]

🎯 演示内容

主组件包含以下演示场景：

1. 基础用法: 简单的文本选项
2. 水果选择: 带图标的选项展示
3. 评分选择: 数字选项演示
4. 禁用状态: 禁用组件的展示

🎨 样式定制

组件使用 SCSS 编写，支持以下自定义变量：

// 主色调
$primary-color: #007AFF;
$background-color: #ffffff;
$border-color: #e1e1e1;
$text-color: #333333;
$placeholder-color: #999999;

// 尺寸
$dropdown-height: 44px;
$border-radius: 8px;
$option-height: 44px;

📦 分发说明

1. 复制整个 uni_modules/ios-dropdown 文件夹到目标项目
2. 在页面中直接引用组件即可使用
3. 无需额外配置，开箱即用

🔧 兼容性

• ✅ H5
• ✅ 小程序（微信、支付宝、百度等）
• ✅ App（iOS、Android）
• ✅ 快应用

📝 更新日志

v1.0.0

• 🎉 初始版本发布
• ✨ 支持 iOS 风格下拉框
• 📱 完美适配移动端
• 🎨 包含完整演示页面