更新记录

1.0.0（2026-02-28）

1.0.0

平台兼容性

uni-app(3.6.17)

🚀 无留白全屏滑动 Swiper | 极致丝滑 | 完美支持 Tab 联动

还在为 uni-app 原生 <swiper> 组件全屏滑动时两边漏出白边、嵌套复杂元素掉帧卡顿而烦恼吗？

本组件基于 BetterScroll 和 renderjs 底层视图层渲染技术打造，为你带来媲美原生 App 般丝滑的全屏滑动体验，彻底告别白边与卡顿！完美还原类似抖音、今日头条、小红书的顶部 Tab 联动滑动交互！

⚠️ 购买前必读（防坑指南，请务必查看）

1. 平台兼容性要求： 本组件依赖 renderjs，完美支持 App-Vue 和 H5 端。 ❌ 不支持微信小程序、支付宝小程序等各类小程序端（小程序环境不支持 renderjs，强行使用会白屏，请勿购买错误）。
2. 依赖安装要求： 本组件底层使用 @better-scroll/core 和 @better-scroll/slide，导入插件后必须执行 npm install 安装依赖，具体请看下方【快速上手】。

💡 核心亮点 / 解决痛点

• ✅ 彻底拒绝留白：修复了原生 Swiper 在快速滑动大屏/全屏内容时，边缘加载跟不上导致的白色闪烁和留白问题。
• ✅ 极致性能 60fps：运行在视图层（renderjs），滑动直接在底层渲染，不与逻辑层频繁通信，性能拉满。
• ✅ 完美支持 Tab 联动：采用极其灵活的 <slot> 插槽设计，自带一套高端“毛玻璃拟态”顶部 Tab 导航栏示例，点击跳转与滑动跟随完美同步。
• ✅ 开箱即用：符合 uni_modules 规范，导入后直接复制下方 Demo 代码即可实现企业级 UI 效果。

📷 效果演示

建议开发者在此处插入一张 GIF 动图

📦 快速上手（只需 2 步）

第一步：安装依赖（极其重要，否则运行报错白屏！）

导入本插件后，请在你的 HBuilderX 左侧项目管理器中，右键点击本插件的目录（uni_modules/ly-full-swiper），选择 “使用命令行窗口打开目录”，然后在弹出的黑框中运行：

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

(如果没有初始化过 npm，请先在项目根目录运行 npm init -y)

第二步：复制绝美企业级 Demo（直接在页面中使用）

强烈建议：去掉页面的原生导航栏体验更佳（在 pages.json 对应的页面配置中设置 "navigationStyle": "custom"）。

<template>
  <view class="demo-container">
    <ly-full-swiper
      :pages="tabList.length"
      :current="currentIndex"
      @change="onChange"
    >
      <!-- 高端顶部 Tab 导航栏 (利用 dot 插槽实现) -->
      <template #dot="{ current }">
        <view class="tab-bar">
          <view
            v-for="(item, index) in tabList"
            :key="index"
            class="tab-item"
            :class="{ active: current === index }"
            @click="goToPage(index)"
          >
            <!-- Tab 文字 -->
            <text class="tab-text">{{ item }}</text>
            <!-- 底部激活状态的小横线 -->
            <view
              class="tab-line"
              :class="{ 'line-active': current === index }"
            ></view>
          </view>
        </view>
      </template>

      <!-- 第一页：推荐 -->
      <template #tab1>
        <view class="page-content bg-blue">
          <text class="title">推荐频道</text>
          <text class="subtitle">左右滑动，Tab 自动跟随</text>
        </view>
      </template>

      <!-- 第二页：热门 -->
      <template #tab2>
        <view class="page-content bg-purple">
          <text class="title">热门内容</text>
          <text class="subtitle">点击 Tab，页面自动丝滑跳转</text>
        </view>
      </template>

      <!-- 第三页：科技 -->
      <template #tab3>
        <view class="page-content bg-orange">
          <text class="title">科技前沿</text>
          <text class="subtitle">毛玻璃导航栏，高端大气</text>
        </view>
      </template>

      <!-- 第四页：我的 -->
      <template #tab4>
        <view class="page-content bg-green">
          <text class="title">个人中心</text>
          <view class="btn-start" @click="startApp">立即开启探索</view>
        </view>
      </template>
    </ly-full-swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentIndex: 0, // 控制当前页
        tabList: ["推荐", "热门", "科技", "我的"], // Tab 菜单数组
      };
    },
    methods: {
      // 监听组件内部滑动结束事件，更新高亮的 Tab
      onChange(index) {
        this.currentIndex = index;
      },
      // 点击顶部 Tab 切换页面
      goToPage(index) {
        this.currentIndex = index;
      },
      startApp() {
        uni.showToast({ title: "欢迎使用", icon: "none" });
      },
    },
  };
</script>

<style scoped>
  /* 整个页面去内边距 */
  .demo-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
  }

  /* ================== 高端毛玻璃 Tab 导航栏 ================== */
  .tab-bar {
    width: 100%;
    height: 100rpx;
    padding-top: var(--status-bar-height); /* 完美适配 App 端刘海屏状态栏 */
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15); /* 玻璃拟态效果 */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 99;
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
  }
  .tab-text {
    font-size: 32rpx;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
  }
  .tab-item.active .tab-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
  }
  .tab-line {
    width: 40rpx;
    height: 6rpx;
    background-color: #ffffff;
    border-radius: 6rpx;
    margin-top: 8rpx;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.3s ease;
  }
  .tab-item .tab-line.line-active {
    opacity: 1;
    transform: scaleX(1);
  }
  /* ======================================================== */

  /* 每一页的通用样式：居中排版 */
  .page-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  /* 渐变背景色，让滑动效果更明显 */
  .bg-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }
  .bg-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  .bg-orange {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  }
  .bg-green {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  }

  /* 文本与按钮样式 */
  .title {
    font-size: 60rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
  }
  .subtitle {
    font-size: 32rpx;
    opacity: 0.9;
  }
  .btn-start {
    margin-top: 60rpx;
    padding: 24rpx 80rpx;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2rpx solid #fff;
    border-radius: 50rpx;
    font-size: 32rpx;
    backdrop-filter: blur(4px);
    transition: all 0.3s;
  }
  .btn-start:active {
    background-color: #fff;
    color: #38f9d7;
  }
</style>

📚 API 接口参考

Props 属性

Events 事件

Slots 插槽

❓ 常见问题 FAQ

Q: 为什么运行后控制台报错 Cannot find module '@better-scroll/core' 并且一片空白？ A: 发生此错误 100% 是因为你没有安装 npm 依赖。请务必查看文档上方的【快速上手 - 第一步】，在项目里运行 npm install。

Q: 为什么在微信小程序里跑不起来 / 白屏？ A: 文档顶部已用红字标明，本插件采用了 renderjs 渲染视图层技术以换取极致性能，小程序原生环境并不支持此技术，因此仅限 App-Vue 和 H5 端使用。

💬 售后与技术支持

创作不易，如果本插件切实解决了你的全屏滑动痛点，帮助你节省了开发时间，请给个 5 星好评鼓励一下！🌟🌟🌟🌟🌟

遇到任何问题或发现 Bug，请在插件评论区留言，通常会在 12 小时内响应并提供更新修复。祝您开发愉快！