ZebraSwiper

基于uniapp，兼容多端的高性能轮播组件库，支持多种复杂的 3D 轮播效果。

🔥 文档网站     🚀 zebraUI组件库

介绍

zebra-swiper 是一款兼容多端的高性能轮播组件库，支持多种复杂的 3D 轮播效果。它不仅具备丰富的内置功能，还为开发者提供了极大的灵活性，以适应复杂场景的需求。

特性

• 🧩 多端兼容：全面支持小程序、H5 和 App 平台，实现跨平台一致性。
• 🧩 TypeScript支持：提供完整的TypeScript支持。
• 🎨 创意自定义：通过 creative 特性，开发者可以定制具有独特表现力的轮播效果。
• ⚡ 流畅性能：即使在数据量巨大的情况下，利用virtual特性依然能够实现丝滑的滚动体验。
• 🔧 扩展性强：通过监听特定事件，可以轻松集成和扩展自定义插件模块。
• 🏗️ 模块化设计：功能独立分离，按需加载，确保最小化代码体积。

安装

详细安装方法，可参考文档

npm 方式

# npm
npm i @zebra-ui/swiper

# pnpm
pnpm add @zebra-ui/swiper

easycom方式引入：

// pages.json

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^z-(.*)": "@zebra-ui/swiper/components/z-$1/z-$1.vue"
    }
  },
 "pages": [...],
 "globalStyle": {...}
}

通过 uni_modules 安装

zebra-swiper已经在uniapp的插件市场发布。

如果使用的IDE为HbuilderX，则可以通过uniapp的插件市场进行项目导入。

uniapp提供了uni_modules自动引入，使用此方法不需要再单独对组件进行引入。

详细安装及使用方法，可参考文档

文档网站

访问以下链接以获取完整的组件库文档和使用指南：

• 📘 zebra-swiper 官方文档
• 📘 zebra-swiper GitHub Pages（备用地址）

示例项目

以下是 zebra-swiper 官方提供的一些示例项目，开发者可以根据需求快速上手：

• 📂 normal：使用 HbuilderX 创建的示例项目，通过 uni_modules 引入 zebra-ui。
• 📂 cli：基于 VSCode 创建，通过 pnpm 引入 zebra-ui 的示例项目。

Zebra 生态

Zebra 官方还维护了多个相关项目，为开发者提供了多样化的工具：

• 🛠️ zebra-ui：基于 UniApp 的多端兼容组件库，采用 Vue 3 + TypeScript + Script Setup 构建。
• 🎨 zebra-color：轻量级、全平台兼容的颜色选择器。
• 🌐 zebra-axios：专为 UniApp 设计的 Axios 适配器，兼容小程序、H5 和 App。

贡献指南

zebra-swiper 目前仍处于初期开发阶段，我们非常欢迎开发者参与项目的完善和优化。您可以通过以下方式为社区做出贡献：

• 🔄 提交 PR：修复问题或添加新功能。
• 🐛 提交 Issues：报告使用中的问题或提出改进建议。
• 🤝 加入 Zebra 团队：与我们一同探索和推进开源项目的发展。

手机预览

预览

交流群

QQ群：947159437 点击加入

3.0.2（2025-01-17）

2025-01-17

重要更新 ✨

在组件内部实现中，props 的声明方式已发生调整。这一变化并不影响开发者的使用方法。

此前的实现方式：

withDefaults(defineProps<propsType>(), { ... })

现已更改为传统形式：

defineProps({...})

此次变更涉及以下组件：

• z-swiper
• z-swiper-item
• z-navigation
• z-pagination
• z-scrollbar

该调整旨在提升对 JavaScript 项目的兼容性与友好性。

Bug 修复 ⚙️

• fix(swiper)：⚙️ 修复 小程序中使用特殊切换效果时，transitionend不执行的问题 by @Tanch in #0777fce。
• fix(swiper)：⚙️ 修复 当开启autoplay时，设置delay为0，小程序出现requestAnimationFrame相关异常 by @Tanch in #c9cca9c。
• fix(swiper)：⚙️ 修复 在弹窗中使用swiper时，小程序无法正常计算宽度与高度的问题 by @Tanch in #c40f96。 小程序在弹窗中使用swiper时，需提前设置width,height。具体可参考文档： 小程序在弹窗 popup 中使用 swiper 时的加载问题。

文档更新 ✅

• docs: ✅ 组件文档新增Template 模板 by @Tanch in #57。

  3.0.1（2025-01-05）

  2025-01-05

Bug 修复 ⚙️

• fix(swiper)：⚙️ 修复 因touchstart touchmove 事件的passive修饰符引起的App端无法滑动的问题 by @Ru1ers in #55，close #52。
• fix(swiper-native)：⚙️ 修复 virtual 模式下二次赋值时，页面不更新的问题 by @Ru1ers in #56。
• fix(swiper)：⚙️ 修复 使用切换效果时，swiperSlideOffset 获取不准确的问题 by @Ru1ers in #56。

文档更新 ✅

• docs: ✅ 组件文档新增Playground 集成codesandbox by @Ru1ers in #53。

  3.0.0（2025-01-01）

2025-01-01

重要更新 ✨

zebra-swiper 组件已基于vue3 + TypeScript重构。

zebra-swiper3.0已不再兼容vue2，同时，2.x版本非重大问题，将不再继续维护，且不再提供新功能。得益于vue3的proxy代理机制，zebra-swiper组件在性能上得到较大提升。

有关从2.x迁移至3.0的详细内容，请参考文档从 2.x 迁移。

3.0版本主要做出以下重大变更：

• 1.参数传递的结构性调整
• 2.事件监听机制的优化
• 3.v-model 的使用调整
• 4.loop 逻辑的深度重构
• 5.模块化按需引入

新功能 ✨

• feat(swiper)：✨ zebra-swiper 组件基于vue3 + TypeScript重构 by @Ru1ers in #33。

文档更新 ✅

• docs: ✅ 组件文档基于vitepress重构 by @Ru1ers in #33。3.0文档提供更为完善的使用方法，以及更直观的展现方式。

其他更改

• ci: ⚡ 新增文档自动构建github-page流程。
• ci: ⚡ 新增文档自动上传服务器流程。
• ci: ⚡ 新增组件自动发布github-release流程。

2.2.8（2023-12-21）

2023-12-21

Fix

• 修复vue3关于transitionEnd的相关报错。
• 修复vue3关于emit的相关警告。
• 修复vue3提示onResize方法的的警告。
• 修复vue3无法使用virtual的错误。
• 新增关于vue3的示例项目，包含组合式api用法，开发者在vue3项目中使用zebra-swiper可获得更好的开发体验。

2.2.7（2023-09-15）

2023-09-15

Feat

• 新增controller控制器，用于多个swiper之间同步切换状态。
• 新增虚拟slide配置，用于处理在大量数据时产生的卡顿问题。（只能作用于view标签，图片及其他标签会出现闪烁问题，h5可使用img标签。）
• 示例项目样式及目录结构更改。

Fix

• 修复swiper滑动时会导致页面发生滚动的问题。

2.2.6（2023-02-20）

2023-02-20

Feat

• panorama全景切换效果新增stretch参数，用于控制slide之间的距离。

Fix

• 修复字节小程序3D样式失效的问题。
• 修复panorama切换效果参数无效的问题。
• 修复autoHeight高度自适应使用报错的问题。（autoHeight选项可以正常使用，且在大多数场景下可以正确获取高度）

2.2.5（2022-11-10）

2022-11-10

Feat

• cards卡片切换效果新增perSlideRotate，perSlideOffset参数用于控制卡片的偏移距离及旋转角度。
• 微信小程序中默认使用虚拟节点渲染，即virtualHost: true。

Fix

• 修复pagination选项开启后，动态控制swiper禁用或启用报错的问题。
• 修复支付宝小程序3D样式失效的问题。

2.2.4（2022-09-23）

2022-09-23

Feat

• 新增noSwiping参数控制是否禁止触摸。当禁止触摸开启时，不可通过滑动切换。可通过自动切换，slideTo等方法切换。

Fix

• 修复vue3下app触摸无效的问题。
• 新增触摸事件touchcancel。

2.2.3（2022-07-26）

2022-07-26

Feat

• 卡片切换效果cards新增rotate参数，用于控制卡片切换时是否发生旋转。

Fix

• 修复微信小程序使用zebra-swiper时，页面无法滚动。
• 修复app报错toJSON的问题。
• 修复swiper在vue3中无法自动播放的问题。

2.2.2（2022-07-01）

2022-07-01

Feat

• 兼容PC浏览器端。
• 初步兼容VUE3。

Fix

• 修复使用zebra-swiper时，页面无法滚动。（zebra-swiper将不再默认阻止事件冒泡）。

2.2.1（2022-03-31）

2022-03-31

Feat

• 新增changeDirection方法，该方法用于动态改变swiper方向。
• z-swiper-item新增swiperItemWidth swiperItemHeight 属性，用于在swiper无法正确获取宽高的情况下设置swiper的宽高（如快手小程序）。

Fix

• 消除快手小程序itemPropWxs的警告。

2.2.0（2022-03-21）

2022-03-21

本次更新调整了组件的整体架构及组件入口逻辑。主要为性能优化，不涉及新功能。

不兼容性更新：

• z-swiper 的 customStyle 由字符串类型更改为Object类型（与z-swiper-item保持一致）。
• z-swiper-item 删除了加载的效果。

Fix

• 修复因数据改变而无法正确触发更新的问题。
• 修复方法 disable enable 提示未定义的问题。

Perf

• 组件首次渲染速度优化。
• loop模式处理数据后才开始加载swiper，确保数据的一致性。
• 部分同步方法更改为异步，体验更流畅。

2.1.4（2022-03-05）

2022-03-05

Feat

• 高级案例加入开屏页。点击预览

Fix

• 修复百度小程序高度计算错误的问题。

2.1.3（2022-03-03）

2022-03-03

Feat

• 新增高级案例模块。
• 高级案例加入环游地球。点击预览
• 微信小程序，qq小程序使用wxs赋值样式。

2.1.2（2022-03-02）

2022-03-02

本次改版涉及所有开启loop的功能。请更新后删除手动拼接的数据。

Feat

• loop无限循环模式无需再手动拼接数据。

2.1.1（2022-03-01）

2022-03-01

Fix

• 修复字节小程序轮播内容不显示的问题。
• 修复字节小程序获取位置信息错误的问题。

Docs

• 文档新增事件。

2.1.0（2022-02-27）

2022-02-27

更新须知

使用组件时，需在z-swiper标签上以v-model的形式传入list数据，也就是要循环的列表数据，该属性为强制性，不加会导致意外错误。例：

之前的方式：

<z-swiper>
    <z-swiper-item v-for="(item,index) in list" :key="index">
  <image class="image" :src="item" mode="aspectFill">
  </image>
 </z-swiper-item>
</z-swiper>

现在的方式：

<z-swiper v-model="list"> //这里传入的需和下方循环的保持一致
 <z-swiper-item v-for="(item,index) in list" :key="index">
  <image class="image" :src="item" mode="aspectFill">
  </image>
 </z-swiper-item>
</z-swiper>

这个操作也为swiper接管数据操作铺垫，对后续很多新功能非常有用，也为loop无限循环的痛点提供了解决方案。

Fix

• 修复数据为空时报错。
• 修复请求数据时swiper提前初始化的问题。

Feat

• 新增滚动条功能。

2.0.1（2022-02-25）

2022-02-25

Fix

• 修复插槽内容class样式不生效问题。

Feat

• 新增缩略图功能。

2.0.0（2022-02-24）

2022-02-24

Feat

• 该版本为破坏性改版，无法兼容1.0。
• 代码重构，使用模块化将功能分割，大幅提升性能，方便后续维护。
• 全面对标swiper组件，并实现全端兼容。小程序也可实现炫酷的轮播效果。
• 所有切换效果全部支持loop无限循环。
• 新增全景切换效果。
• 新增轮播块功能，可自定义显示数量。
• 新增进度条指示器。

1.0.7（2022-01-25）

2022-01-25

Feat

• 新增轮播切换器功能，可使用默认切换或自定义切换。
• 示例项目新增切换器的使用及自定义切换器。

1.0.6（2022-01-24）

2022-01-24

Chore

• 示例项目新增指示器的使用及自定义指示器。

1.0.5（2022-01-21）

2022-01-21

Docs

• README.md新增手机预览，包含微信，支付宝小程序码，H5二维码。

1.0.4（2022-01-20）

2022-01-20

Style

• 示例项目首页px统一修改为rpx。

1.0.3（2022-01-19）

2022-01-19

Fix

• 修复轮播设置为纵向时，高度错误的问题。
• 修复在百度小程序中样式错乱的问题。

1.0.2（2022-01-18）

2022-01-18 Docs

• README.md新增gif预览图
• 修复因未知原因引起的uni_modules组件上传错误的问题。

2022-01-14

v1.0.1

Feature

• 新增zebra-swiper,zebra-swiper-item组件。
• 新增多种3D切换效果。包括渐变，方块，3D流，翻转，卡片，创意性等多种切换效果。
• 新增示例项目，包含多种切换效果示例。