6.5 KiB

Raw Permalink Blame History

SwipeToNext 组件使用文档

组件介绍

SwipeToNext 是一个通用的触底跳转组件，封装了手势检测、延迟防抖、提示文字等功能，可以在任何需要滑动跳转的页面中使用。

组件特性

✅ 手势滑动检测
✅ 防误触发机制（延迟允许跳转）
✅ 可配置的滑动阈值
✅ 自定义提示文字
✅ 支持事件监听
✅ 完全可配置的参数

使用方法

1. 引入组件

<script>
import SwipeToNext from '@/components/SwipeToNext.vue';

export default {
  components: {
    SwipeToNext
  }
}
</script>

2. 基础使用

<template>
  <SwipeToNext 
    :is-last-slide="isLastSlide" 
    :target-path="'/next/page'"
    @swipe-to-next="handleSwipeToNext"
  >
    <!-- 你的页面内容 -->
    <view class="content">
      <!-- 轮播图或其他内容 -->
    </view>
  </SwipeToNext>
</template>

<script>
export default {
  data() {
    return {
      isLastSlide: false
    }
  },
  methods: {
    // 处理swiper切换或其他逻辑
    handlePageChange() {
      // 根据你的逻辑设置 isLastSlide
      this.isLastSlide = true; // 当到达最后一页时
    },
    handleSwipeToNext(targetPath) {
      console.log('即将跳转到:', targetPath);
      // 可以在这里添加额外的逻辑，如数据统计
    }
  }
}
</script>

3. 完整配置使用

<template>
  <SwipeToNext 
    :is-last-slide="isLastSlide" 
    :target-path="'/next/page'"
    :show-tip="true"
    tip-text="向上滑动查看更多内容"
    :swipe-threshold="100"
    :delay-time="800"
    :enable-delay="true"
    @swipe-to-next="handleSwipeToNext"
  >
    <!-- 你的页面内容 -->
    <view class="content">
      <!-- 内容区域 -->
    </view>
  </SwipeToNext>
</template>

Props 参数

参数名	类型	默认值	必填	说明
`isLastSlide`	Boolean	`false`	✅	是否在最后一页/最后一个状态
`targetPath`	String	-	✅	跳转的目标路径
`showTip`	Boolean	`true`	❌	是否显示提示文字
`tipText`	String	`'继续向上滑动进入下一章节'`	❌	提示文字内容
`swipeThreshold`	Number	`80`	❌	滑动阈值（像素）
`delayTime`	Number	`500`	❌	延迟允许跳转的时间（毫秒）
`enableDelay`	Boolean	`true`	❌	是否启用延迟机制
`alwaysEnable`	Boolean	`false`	❌	是否总是启用跳转（忽略isLastSlide状态）

Events 事件

事件名	参数	说明
`swipe-to-next`	`targetPath`	触发跳转时的回调事件

使用场景示例

场景1：图片轮播页面

<template>
  <SwipeToNext 
    :is-last-slide="currentIndex === images.length - 1" 
    :target-path="'/gallery/next'"
  >
    <swiper @change="handleSwiperChange">
      <swiper-item v-for="(img, index) in images" :key="index">
        <image :src="img" mode="aspectFit" />
      </swiper-item>
    </swiper>
  </SwipeToNext>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      images: ['img1.jpg', 'img2.jpg', 'img3.jpg']
    }
  },
  methods: {
    handleSwiperChange(e) {
      this.currentIndex = e.detail.current;
    }
  }
}
</script>

场景2：文章阅读页面

<template>
  <SwipeToNext 
    :is-last-slide="isReadComplete" 
    :target-path="'/article/next'"
    tip-text="继续滑动阅读下一篇文章"
    :swipe-threshold="60"
  >
    <scroll-view @scrolltolower="handleScrollToBottom">
      <view class="article-content">
        <!-- 文章内容 -->
      </view>
    </scroll-view>
  </SwipeToNext>
</template>

<script>
export default {
  data() {
    return {
      isReadComplete: false
    }
  },
  methods: {
    handleScrollToBottom() {
      // 滚动到底部时认为阅读完成
      this.isReadComplete = true;
    }
  }
}
</script>

场景4：单张图片或总是启用触底跳转

<template>
  <SwipeToNext 
    :always-enable="true"
    :target-path="'/next/chapter'"
    tip-text="向上滑动查看下一内容"
    :enable-delay="false"
  >
    <view class="single-image">
      <image :src="imageUrl" mode="aspectFit" />
    </view>
  </SwipeToNext>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'single-image.jpg'
    }
  }
}
</script>

<template>
  <SwipeToNext 
    :is-last-slide="currentStep === totalSteps - 1" 
    :target-path="'/guide/complete'"
    tip-text="向上滑动完成引导"
  >
    <view class="guide-step">
      <view class="step-content">
        步骤 {{ currentStep + 1 }} / {{ totalSteps }}
      </view>
      <button @click="nextStep">下一步</button>
    </view>
  </SwipeToNext>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0,
      totalSteps: 5
    }
  },
  methods: {
    nextStep() {
      if (this.currentStep < this.totalSteps - 1) {
        this.currentStep++;
      }
    }
  }
}
</script>

特殊情况处理

单张图片问题

当只有一张图片时，传统的 isLastSlide 逻辑不适用。这时可以使用 alwaysEnable 参数：

<!-- 单张图片的解决方案 -->
<SwipeToNext 
  :always-enable="true"
  :target-path="'/next/page'"
  :enable-delay="false"
>
  <image src="single-image.jpg" />
</SwipeToNext>

参数优先级

当 alwaysEnable="true" 时：

忽略 isLastSlide 的值
总是显示提示文字
总是允许触底跳转
建议设置 enableDelay="false" 以获得更好的响应速度

确保正确设置 isLastSlide：这是控制是否允许跳转的关键属性
路径格式：targetPath 需要是有效的 uni-app 路由路径
性能考虑：如果不需要延迟机制，可以设置 enableDelay: false 来提高响应速度
样式覆盖：组件内的提示文字样式可以通过全局样式覆盖
事件监听：建议监听 swipe-to-next 事件进行数据统计或其他操作

自定义样式

如果需要自定义提示文字的样式，可以在页面中添加：

// 覆盖组件样式
.swipe-to-next .bottom-tip {
  bottom: 200rpx !important; // 调整位置
  background: rgba(255, 255, 255, 0.9) !important; // 改变背景色
  
  text {
    color: #333 !important; // 改变文字颜色
    font-size: 32rpx !important; // 改变字体大小
  }
}

这个组件极大地简化了触底跳转功能的实现，让你可以专注于业务逻辑而不用重复编写相同的手势检测代码。

6.5 KiB Raw Permalink Blame History