更新记录

1.0.0（2026-06-13）

• 初始版本。
• 支持 H5 / App-vue 横向滑动。
• 禁用首尾回弹，规避露底问题。
• 支持 current 外部控制、change、transition、animationfinish 事件。

平台兼容性

uni-app(5.08)

uni-app x(5.08)

bf-swiper 无回弹横向 swiper

bf-swiper 是一个基于 BetterScroll + renderjs 的 uni-app 横向滑动组件，适合在 H5 / App-vue 中替代原生 swiper，解决滑动到最左侧或最右侧时出现回弹、露底的问题。

当前版本面向 Vue2 + App-vue / H5。小程序、nvue、uvue 不支持 renderjs 方案，建议继续使用原生 swiper。

安装依赖

如果项目还没有安装 BetterScroll，请先安装：

npm install @better-scroll/core @better-scroll/slide

基础用法

<template>
  <bf-swiper
    :pages="4"
    :current="current"
    height="100vh"
    width="100vw"
    @change="handleChange"
    @transition="scrollable = false"
    @animationfinish="scrollable = true"
  >
    <template #dot="{ current }">
      <view class="tabs">当前页：{{ current }}</view>
    </template>

    <template #tab1>
      <view class="page">第一页</view>
    </template>

    <template #tab2>
      <view class="page">第二页</view>
    </template>

    <template #tab3>
      <view class="page">第三页</view>
    </template>

    <template #tab4>
      <view class="page">第四页</view>
    </template>
  </bf-swiper>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      scrollable: true,
    };
  },
  methods: {
    handleChange(index) {
      this.current = index;
    },
  },
};
</script>

API

Props

Slots

Events

发布到 DCloud 插件市场

1. 修改 uni_modules/bf-swiper/package.json 中的 id、displayName、description、keywords、repository、联系方式等信息。id 需要在插件市场唯一。
2. 确认 uni_modules.platforms 里的兼容端。本组件目前建议标记为 H5、App-vue 支持，小程序、nvue、uvue 不支持。
3. 在 HBuilderX 中右键 uni_modules/bf-swiper，选择发布到插件市场；或登录 DCloud 插件市场后台创建插件并上传这个 uni_modules/bf-swiper 目录。
4. 发布前至少测试 H5、Android App、iOS App 三类场景，重点验证首尾滑动不露底、外部 current 切换、页面销毁重进、嵌套滚动区域。

注意事项

• 本组件通过 bounce: false 禁用 BetterScroll 的边界回弹，因此不会出现原生 swiper 首尾露底效果。
• 页面内容如果有纵向滚动，建议在 transition 和 animationfinish 中控制内部滚动开关，避免横向滑动时误触。
• 如果业务需要小程序端，请保留条件编译，在小程序端继续使用原生 swiper。