更新记录

0.0.1（2026-06-13） 下载此版本

无

平台兼容性

uni-app(5.0)

y-swiper

纵向虚拟滑动容器：固定 size 个 DOM 槽位（.y-swiper-main）映射 list 数据；手势上滑下一项、下滑上一项；v-model 绑定当前数据索引。

快速用法

<y-swiper v-model="currentIndex" :list="dataList" @need="onNeed">
  <template #default="{ item, index, swiper }">
    <view class="slide">{{ item?.content }}</view>
  </template>
</y-swiper>

• v-model：当前数据在 list 中的索引（number）。
• list：数据源；为空时不响应滑动。
• size：同时存在的 DOM 槽位数，默认 4（建议 ≥2）。
• min：剩余条数等于该值时，上滑切到下一项触发 need。
• scoped 插槽：item（数据项，越界为 null）、index（数据索引）、swiper（槽位索引）。

Props

事件

行为说明

• 根节点 .y-swiper 监听 touch；touchmove 使用 .stop.prevent 禁用橡皮筋。
• 位移以容器高度换算为 translateY 百分比；松手阈值：普滑 50%、快速滑动 8%（600ms 内再次触摸判定快速滑）。
• 首/末项边界：拖动阻尼（约 10%）；越界滑动 emit top / bottom，不切换索引。
• size === 2 与 size > 2 使用不同的槽位映射算法（getItemByRenderIndex）。
• 切换项时更新 currentIndex（槽位轮转）并 emit update:modelValue、change。
• need 条件：list.length - modelValue - 1 === min 时在上滑切项后触发；list.length 变化会重置触发标志。
• 无 Ref 暴露方法；父级仅改 modelValue 会更新插槽数据映射，槽位视觉位置以内部 currentIndex 为准。

使用注意

• 默认容器高度 90vh，挂载后测量实际高度参与位移计算。
• item 可能为 null（槽位映射到越界索引时），模板中请做空值判断。

样式自定义

y-swiper
  y-swiper-main（y-swiper-animation）
    默认 scoped 插槽内容

<y-swiper v-model="i" :list="list" class="my-swiper">
  <template #default="{ item }">
    <view class="slide">{{ item?.title }}</view>
  </template>
</y-swiper>

<style lang="scss" scoped>
.my-swiper :deep(.y-swiper) {
  height: 80vh;
  .y-swiper-main { border-radius: 16rpx; }
}
</style>

示例

加载更多（need）

<y-swiper v-model="index" :list="list" :min="3" @need="loadMore" />

双槽模式

<y-swiper v-model="index" :list="list" :size="2">
  <template #default="{ item, index }">
    <view>{{ index }} — {{ item?.content }}</view>
  </template>
</y-swiper>

边界事件

<y-swiper v-model="index" :list="list" @top="onTop" @bottom="onBottom" />