当前位置：首页 > uni-app

uniapp 滑动

2026-02-05 19:13:19uni-app

uniapp 滑动实现方法

在uniapp中实现滑动效果可以通过多种方式，包括使用scroll-view组件、swiper组件或自定义手势事件。以下是具体实现方法：

scroll-view组件实现纵向/横向滑动

scroll-view是uniapp提供的滚动视图容器，支持横向和纵向滚动：

uniapp 滑动

<scroll-view scroll-y="true" style="height: 300px;">
  <view v-for="(item, index) in list" :key="index" style="height: 100px;">
    内容区块{{index}}
  </view>
</scroll-view>

横向滚动只需设置scroll-x="true"并确保内容宽度超出容器：

<scroll-view scroll-x="true" style="white-space: nowrap; width: 100%;">
  <view v-for="(item, index) in list" :key="index" style="display: inline-block; width: 200px;">
    横向内容{{index}}
  </view>
</scroll-view>

swiper组件实现轮播滑动

swiper组件适合实现轮播图效果：

uniapp 滑动

<swiper :autoplay="true" :interval="3000" circular="true">
  <swiper-item v-for="(item, index) in swiperList" :key="index">
    <image :src="item.image" mode="aspectFill"></image>
  </swiper-item>
</swiper>

自定义手势滑动

通过touch事件可以实现更复杂的滑动交互：

<view 
  @touchstart="handleTouchStart" 
  @touchmove="handleTouchMove" 
  @touchend="handleTouchEnd"
  style="width: 100%; height: 200px; background-color: #f0f0f0;">
  滑动区域
</view>

对应JavaScript逻辑：

data() {
  return {
    startX: 0,
    startY: 0
  }
},
methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].pageX
    this.startY = e.touches[0].pageY
  },
  handleTouchMove(e) {
    const moveX = e.touches[0].pageX - this.startX
    const moveY = e.touches[0].pageY - this.startY
    if (Math.abs(moveX) > Math.abs(moveY)) {
      // 水平滑动逻辑
    } else {
      // 垂直滑动逻辑
    }
  },
  handleTouchEnd() {
    // 滑动结束处理
  }
}