收藏人数:
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏（0）
更新记录
1.0.0（2025-07-03） 下载此版本
# uni-popup-indexed
## 简介
uni-popup-indexed 是一个功能强大的 uni-app 弹窗组件，支持索引功能、多种动画效果和位置配置，基于 Vue 3 Composition API 开发。
## 特性
-
平台兼容性
uni-app(4.05)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| - | √ | √ | √ | √ | - | √ | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | - | - | - | - | - | - | - | - | - | - |
uni-app x(4.05)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| - | - | - | - | - | - |
# popup-indexbar
## 简介
popup-indexbar 是一个功能强大的 uni-app 弹窗组件，支持索引功能、多种动画效果和位置配置，基于 Vue 3 Composition API 开发。
## 特性
- 🎯 支持多种弹窗位置：center、top、bottom、left、right
- 📇 **索引功能**：支持分组数据展示和快速索引跳转
- 📜 **滚动视图**：支持大量数据的高性能滚动展示
- 🎨 丰富的动画效果和交互体验
- 📱 完美支持各平台：APP、H5、小程序
- 🔧 灵活配置：背景色、圆角、层级等
- 🚀 基于 Vue 3 Composition API，性能更优
- 💡 轻量级，无依赖
## 安装
### 通过插件市场安装
在 uni-app 插件市场搜索 popup-indexbar，点击安装即可。
### 手动安装
1. 下载插件源码
2. 将 uni\_modules 目录复制到项目根目录
## 使用方法
### 基础用法
<template>
<view>
<button @click="showPopup">打开基础弹窗</button>
<popup-indexbar
:show="isShow"
title="基础弹窗"
position="center"
@update:show="isShow = $event"
@close="closePopup"
>
<view class="popup-content">
<text>这是基础弹窗内容</text>
<button @click="closePopup">关闭</button>
</view>
</popup-indexbar>
</view>
</template>
<script setup>
import { ref } from 'vue'
const isShow = ref(false)
const showPopup = () => {
isShow.value = true
}
const closePopup = () => {
isShow.value = false
}
</script>
<style>
.popup-content {
padding: 30rpx;
text-align: center;
}
</style>
### 索引功能用法
<template>
<view>
<button @click="showIndexedPopup">打开索引弹窗</button>
<popup-indexbar
:show="indexedShow"
title="城市选择"
position="bottom"
:enableIndexbar="true"
:indexedData="cityData"
:scrollViewHeight="500"
@update:show="indexedShow = $event"
@item-click="onCitySelect"
>
<template #item="{ item, group }">
<view class="city-item">
<text class="city-name">{{ item.name }}</text>
<text class="city-code">{{ item.code }}</text>
</view>
</template>
</popup-indexbar>
</view>
</template>
<script setup>
import { ref } from 'vue'
const indexedShow = ref(false)
// 索引数据格式
const cityData = ref(\[
{
key: 'A',
title: 'A',
items: \[
{ id: '1', name: '安庆', code: 'AQ' },
{ id: '2', name: '安阳', code: 'AY' }
]
},
{
key: 'B',
title: 'B',
items: \[
{ id: '3', name: '北京', code: 'BJ' },
{ id: '4', name: '保定', code: 'BD' }
]
}
// ... 更多数据
])
const showIndexedPopup = () => {
indexedShow.value = true
}
const onCitySelect = (data) => {
console.log('选择城市:', data.item)
indexedShow.value = false
}
</script>
<style>
.city-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.city-name {
font-size: 28rpx;
color: #333;
}
.city-code {
font-size: 24rpx;
color: #999;
}
</style>
### 高级用法
<template>
<view>
<!-- 自定义插槽用法 -->
<popup-indexbar
:show="isShow"
title="高级弹窗"
position="bottom"
:maskClosable="true"
:showClose="true"
:round="true"
:zIndex="1000"
@open="onOpen"
@close="onClose"
@opened="onOpened"
@closed="onClosed"
>
<template #header>
<view class="custom-header">
<text class="title">自定义标题</text>
<view class="actions">
<button @click="handleConfirm">确定</button>
</view>
</view>
</template>
<view class="content">
<text>自定义内容</text>
</view>
<template #footer>
<view class="custom-footer">
<button @click="closePopup">取消</button>
<button @click="handleConfirm">确定</button>
</view>
</template>
</popup-indexbar>
</view>
</template>
## Props
| 参数名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| show | Boolean | false | 是否显示弹窗 |
| title | String | '' | 弹窗标题 |
| position | String | 'center' | 弹窗位置：center/top/bottom/left/right |
| maskClosable | Boolean | true | 是否允许点击遮罩关闭 |
| showClose | Boolean | true | 是否显示关闭按钮 |
| zIndex | Number | 999 | 弹窗层级 |
| round | Boolean | true | 是否显示圆角 |
| overlay | Boolean | true | 是否显示遮罩 |
| **索引相关** |
| enableIndexbar | Boolean | false | 是否启用索引功能 |
| indexedData | Array | [] | 索引数据 |
| showIndexbar | Boolean | true | 是否显示索引条 |
| stickyOffsetTop | Number | 0 | 吸顶偏移量 |
| scrollViewHeight | Number | 400 | 滚动视图高度(px) |
## Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:show | 弹窗显示状态变化 | Boolean |
| open | 弹窗开始打开时触发 | - |
| opened | 弹窗打开动画完成后触发 | - |
| close | 弹窗开始关闭时触发 | - |
| closed | 弹窗关闭动画完成后触发 | - |
| item-click | 点击索引项时触发 | { item, group } |
## Slots
| 插槽名 | 说明 | 参数 |
|--------|------|------|
| default | 默认内容 | - |
| header | 自定义头部 | - |
| footer | 自定义底部 | - |
| item | 自定义索引项内容 | { item, group } |
## Methods
| 方法名 | 说明 | 参数 |
|--------|------|------|
| open | 打开弹窗 | - |
| close | 关闭弹窗 | - |
| scrollToIndex | 滚动到指定索引 | index: Number |
| calculateGroupPositions | 重新计算分组位置 | - |
## 索引数据格式
const indexedData = \[
{
key: 'A', // 索引键，显示在索引条上
title: 'A', // 分组标题
items: \[ // 分组项目
{
id: '1', // 唯一标识
name: '安庆', // 显示名称
code: 'AQ', // 其他数据
// ...更多自定义字段
}
]
}
]
## 注意事项
1. **Vue 3 兼容性**：组件基于 Vue 3 Composition API 开发，需要 Vue 3 环境
2. **索引功能**：使用索引功能时，数据必须按照指定格式传入
3. **性能优化**：大量数据时建议设置合适的 scrollViewHeight
4. **平台差异**：在小程序中使用时，注意层级和滚动问题
5. **事件处理**：推荐使用 v-model 或 @update:show 处理显示状态
## 平台兼容性
| 平台 | 支持程度 | 注意事项 |
|------|----------|----------|
| APP | ✅ 完全支持 | - |
| H5 | ✅ 完全支持 | - |
| 微信小程序 | ✅ 完全支持 | 注意层级问题 |
| 支付宝小程序 | ✅ 完全支持 | - |
| 其他小程序 | ✅ 完全支持 | 部分功能可能有差异 |
## 更新日志
### 1.0.0 (2025-01-01)
- 🎉 初始版本发布
- ✨ 支持基础弹窗功能
- ✨ 支持索引功能和滚动视图
- ✨ 基于 Vue 3 Composition API
- ✨ 支持多种位置和动画效果
- ✨ 完整的插槽和事件支持
## 联系我们
如有问题或建议，请通过以下方式联系：
- GitHub Issues
- QQ：765637726
- 邮箱：765637726@qq.com
## 许可证
MIT License
下载 3
赞赏 0
下载 10159705
赞赏 1668
赞赏
京公网安备：11010802035340号