uni-app 实现 app仿抖音视频上下滑动切换效果

在 uni-app 中实现类似抖音视频的上下滑动切换效果，可以通过使用 swiper 组件结合 scroll-view 组件以及监听滑动事件来实现。以下是一个简化的代码示例，展示了如何实现这种效果。

1. 页面布局（pages/index/index.vue）

<template>
  <view class="container">
    <scroll-view scroll-y="false" scroll-with-animation="true" @scrolltolower="loadMore">
      <swiper
        class="swiper"
        :autoplay="false"
        :interval="0"
        :duration="300"
        current="{{current}}"
        @change="swiperChange"
      >
        <swiper-item v-for="(video, index) in videos" :key="index">
          <view class="video-item">
            <!-- 视频内容，这里可以是视频组件或者图片模拟 -->
            <image :src="video.url" class="video-img"></image>
          </view>
        </swiper-item>
      </swiper>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      videos: [
        { url: 'path/to/video1.jpg' },
        { url: 'path/to/video2.jpg' },
        // 更多视频数据
      ],
    };
  },
  methods: {
    swiperChange(event) {
      this.current = event.detail.current;
    },
    loadMore() {
      // 加载更多视频的逻辑
      console.log('Loading more videos...');
      // 模拟加载更多视频
      this.videos.push({ url: 'path/to/new_video.jpg' });
    },
  },
};
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper {
  width: 100%;
  height: 100%;
}
.video-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

2. 说明

• scroll-view：用于垂直滚动，这里禁用了垂直滚动（scroll-y="false"），因为我们主要依赖 swiper 实现滑动切换。
• swiper：用于水平滑动切换视频，通过监听 @change 事件获取当前滑动的索引。
• swiper-item：每个 swiper-item 代表一个视频项。
• loadMore 方法：模拟加载更多视频的逻辑，实际应用中可能涉及网络请求。

此示例通过 swiper 组件实现了视频的左右滑动切换效果，并模拟了加载更多视频的功能。如果需要完全仿照抖音的上下滑动切换效果，可能需要结合自定义的滑动逻辑以及更复杂的布局处理，比如动态调整视频列表的高度以适应不同视频内容的展示。