SL-WX-FlipCard 翻转卡片组件插件市场操作视频组件简介基于 CSS Transform 体系实现的点击翻转卡片组件。内置7 种切换动画左右翻转、上下翻转、旋风旋转、淡入淡出、底部滑入、右侧滑入、缩放切换支持单列 / 多列网格布局、互斥展开一次只翻一张、正/背面插槽自定义、批量翻转与还原的对外 API。H5 / 微信小程序通用。修复说明在部分 WebView / 小程序环境下backface-visibility: hidden仅视觉透明仍会拦截二次点击。组件已通过opacity visibility pointer-events三重控制 动画半程切换策略彻底解决「翻转后点不回来」的问题7 种动画全部通过同一可见性机制保障交互一致性。目录结构components/SL-WX-FlipCard └── SL-WX-FlipCard.vue核心特性7 种内置动画通过animation属性切换涵盖 3D 翻牌类flipY / flipX、2D 趣味类rotate、轻量类fade、滑动类slideUp / slideLeft、透视缩放类zoom共 7 种风格。3D 类动画自动启用perspective preserve-3d2D 类动画自动关闭 3D 上下文以减少合成层开销。单列 / 多列自由切换columnCount设置列数1~N内部使用 CSS Grid 自适应排列列间距、行间距、外层内边距均可独立配置。点击翻转全端统一点击任意卡片在正/背面之间切换H5 与小程序行为完全一致所有动画均保证翻转后二次点击必定翻回。互斥展开exclusive true时一次只能有一张卡片处于背面适合「问答」「翻牌游戏」「单选卡片」等场景。任意宽高比通过aspectRatio如1 / 1、16 / 10、1 / 1.2控制卡片形状。正/背面内容完全自定义默认根据数据 key 自动渲染「图片 底部渐变标题/描述」也可通过#front/#back具名插槽完全重写。无图模式自动适配未提供图片字段时正面白底深色字背面浅灰底蓝字居中对齐显示纯文字。对外方法暴露flip(index, flipped)和reset()通过$refs调用。动画类型一览animationprop动画值名称类型效果说明适用场景flipY左右翻转3D沿垂直中线做 Y 轴 180° 翻转经典扑克牌翻牌默认动画商品卡片 / 相册 / 记忆翻牌游戏flipX上下翻转3D沿水平中线做 X 轴 180° 翻转答题卡 / 门票/票据rotate旋风旋转2D绕中心旋转 180° 并搭配弹性缩放cubic-bezier 回弹正背面文字正向显示抽奖 / 转盘 / 活泼的运营位fade淡入淡出2D正面淡出并放大至 1.1 倍背面从 0.9 倍淡入至 1.0 倍相册 / 资讯 / 视觉温和的场景slideUp底部滑入2D背面从卡片底部 100% 处滑入正面同步向上滑出列表项详情 / 问答 / 提示卡slideLeft右侧滑入2D背面从卡片右侧 100% 处滑入正面同步向左滑出横向分页式卡片 / 翻页式展示zoom缩放切换2D正面缩小至 0.2× 消失背面从 0.2× 放大到 1.0× 出现分阶段 opacity 平滑过渡照片集 / 作品展示 / 主题切换卡片小提示同一页面多次切换animation时建议先调用reset()清空所有卡片的翻转态避免处于半翻转中间态时动画算法不同导致的错位感。Props属性类型默认值说明listArray[]数据列表columnCountNumber2列数1为单列2为多列animationStringflipY动画类型flipY/flipX/rotate/fade/slideUp/slideLeft/zoomaspectRatioString1 / 1卡片宽高比width / height如16 / 10、1 / 1.2durationNumber600动画时长ms可见性切换点自动取duration/2radiusNumber16卡片圆角rpxcolumnGapNumber20列间距rpxrowGapNumber20行间距rpxpaddingNumber24外层容器内边距rpxexclusiveBooleanfalse是否互斥展开true时一次只能翻转一张frontImageKeyStringfrontImage正面图片字段名frontTitleKeyStringfrontTitle正面标题字段名frontDescKeyStringfrontDesc正面描述字段名backImageKeyStringbackImage背面图片字段名backTitleKeyStringbackTitle背面标题字段名backDescKeyStringbackDesc背面描述字段名Events事件名回调参数说明itemtap{ item, index, flipped }点击卡片时触发返回当前项数据、索引和翻转后的状态onItemTap({item,index,flipped}){console.log(第index张翻转后flipped,item)}Slots插槽名作用域参数说明front{ item, index }自定义卡片正面内容覆盖默认的「图片标题描述」渲染back{ item, index }自定义卡片背面内容覆盖默认的「图片标题描述」渲染对外方法sl-wx-flip-card refflip :listlist animationzoom /方法名参数说明flip(index?, flipped?)手动翻转。传index翻转指定卡片不传或传null则作用于全部flipped true/false强制指定状态不传则切换reset-将所有卡片还原到正面this.$refs.flip.flip(2,true)// 第 3 张翻到背面this.$refs.flip.flip(0)// 切换第 0 张this.$refs.flip.flip(null,true)// 全部翻开this.$refs.flip.reset()// 全部还原使用示例示例 12 列图片卡片 缩放动画zoomtemplate sl-wx-flip-card refflip :listlist :column-count2 animationzoom :aspect-ratio1 / 1 :duration550 :column-gap16 :row-gap16 itemtaponTap / /template script import SlWxFlipCard from /components/SL-WX-FlipCard/SL-WX-FlipCard.vue export default { components: { SlWxFlipCard }, data() { return { list: [ { frontImage: https://picsum.photos/seed/a/600/600, frontTitle: 雪山之境, frontDesc: 点击缩放查看, backImage: https://picsum.photos/seed/ab/600/600, backTitle: 喜马拉雅, backDesc: 海拔 8848 米常年积雪。 }, { frontImage: https://picsum.photos/seed/b/600/600, frontTitle: 城市夜景, frontDesc: 霓虹闪烁, backImage: https://picsum.photos/seed/bb/600/600, backTitle: 上海外滩, backDesc: 万国建筑博览群。 } ] } }, methods: { onTap({ item, index, flipped }) { console.log(item, index, flipped) } } } /script示例 2问答卡片 旋风动画rotate 互斥template sl-wx-flip-card :listqaList :column-count3 animationrotate :aspect-ratio1 / 1.2 :exclusivetrue front-title-keyq back-title-keyaTitle back-desc-keya / /template script export default { data() { return { qaList: [ { q: 11?, aTitle: 答案2, a: 十进制加法的基础结果。 }, { q: 地球是圆的吗, aTitle: 答案是, a: 两极稍扁、赤道略鼓的椭球体。 }, { q: 水的化学式, aTitle: 答案H₂O, a: 2 个氢原子 1 个氧原子。 } ] } } } /script示例 3横向滑入动画slideLeft 单列大卡片template sl-wx-flip-card :listlist :column-count1 animationslideLeft :aspect-ratio16 / 10 :radius20 :duration500 / /template示例 4淡入淡出 插槽自定义内容template sl-wx-flip-card :listlist :column-count2 animationfade :duration500 template #front{ item } view classfront image :srcitem.cover modeaspectFill classfront__img / view classfront__tag{{ item.tag }}/view /view /template template #back{ item } view classback text classback__price¥ {{ item.price }}/text text classback__desc{{ item.detail }}/text button sizemini typeprimary立即购买/button /view /template /sl-wx-flip-card /template示例 5外部控制 上下翻转flipXtemplate view view classbtns button tap$refs.flip.flip(null, true)全部翻开/button button tap$refs.flip.flip(null, false)全部正面/button button tap$refs.flip.reset()全部还原/button /view sl-wx-flip-card refflip :listlist :column-count3 animationflipX / /view /template动画实现原理简述所有 7 种动画共用同一套可见性切换机制保证交互统一且不会出现点不回来可见性切换时机visibility与pointer-events使用 0s duration 的 transition延迟到duration/2执行——即在动画半程卡片垂直于屏幕 / 两面都不可见的瞬间完成事件命中面的切换。正反双向延迟方向不同未翻转 → 翻转过程中前半程点击仍命中正面、后半程命中背面反向同理避免刚点下一瞬间被另一张面抢走事件。3D 与 2D 的区分外层.sl-flip-cell--3dflipY / flipX才加perspective: 1200px.sl-flip-cell--2d其余 5 种关闭减少小程序 WebView 不必要的 GPU 合成层开销。注意事项3D 兼容性perspective、transform-style: preserve-3d、backface-visibility已加-webkit-前缀。若低端 Android 机型在flipY / flipX下偶现闪烁可缩短duration至400~500ms或改用 2D 动画rotate / fade / slideX / zoom。切换动画时请 reset运行中从一种动画切到另一种时例如演示页的切换条建议先调用$refs.flip.reset()把所有卡还原避免处于翻转态的卡片因两套变换算法差异产生视觉跳变。二次点击必响应7 种动画均通过同一套opacity visibility pointer-events在半程duration/2切换命中面保证正面 → 背面 → 再正面的完整循环链路畅通。字段 key 映射默认渲染依赖 6 个字段若业务字段名不同用frontImageKey等重映射或直接用#front / #back插槽自定义。列数切换动态改columnCount不会清已翻状态。若要切列数时一起重置watch columnCount后调$refs.flip.reset()。互斥 批量 flipexclusive true时flip(null, true)只会让最后一张翻转语义约束。若要全翻开先把exclusive置false。