uni-app中，swiper内嵌list-view无法上下滚动

发布于 1周前 作者 phonegap100 来自 uni-app

uni-app中，swiper内嵌list-view无法上下滚动

开发环境与项目信息

项目信息 描述
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境版本号 windows11
HBuilderX类型 正式
HBuilderX版本号 4.15
手机系统 Android
手机系统版本号 Android 12
手机厂商 一加
手机机型 一加7pro
页面类型 nvue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

示例代码

<template>
  <view>
    <swiper>
      <swiper-item v-for="i:QuestionModel in QuestionList" style="height: 100%;">
        <list-view>
          <list-item>
            <text>{{i.description}}</text>
            <view v-for="(item:QuestionItem,index) in i.questions" :key="index">
              <text>{{item.question}}</text>
              <text v-for="(c:Choices,cindex) in item.choices">{{c.description}}</text>
            </view>
          </list-item>
        </list-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="uts">
type QuestionItem = {
  question: string;
  choices: Choices[];
  answer: string;
  analysis: string;
}

type Choices = {
  title: any | null;
  description: any | null;
}

type QuestionModel = {
  id: any | null;
  questionId: any | null;
  description: any | null;
  questionType: any | null;
  discipline: any | null;
  subject: any | null;
  title: any | null;
  subTitle: any | null;
  questions: QuestionItem[];
  createdTime: any | null;
  year: any | null;
}

export default {
  data() {
    var result = "[{...}]";
  }
}
</script>

操作步骤

参考以上代码。

预期结果

可以左右滑动切换，以及上下滚动。

实际结果

可以左右滑动，但是无法上下滚动。

Bug描述

一个题库的APP，要实现左右滑动可以切换题目，类似轮播图的效果，一个题目如果内容比较多，可以上下滚动。所以在swiper里面内嵌了一个list-view，以支持上下滚动，但是实际无法滚动。


Harmonyos Next教程
4 回复

建议直接附件提供完整demo项目 你这种大量贴代码还不全对我们判断问题意义不大


普遍情况吧，都不需要demo，只测试了安卓端，4.15版本，你写个swiper，swiper-item里面放个list-view，list-view可以滑动，swiper不能滑动

只要页面有滚动，list就无法滚动，这个组件就是让你用来代替页面滚动的，真的坑

在uni-app中，swiper组件和list-view（或scroll-view）的嵌套使用确实可能会遇到一些滚动冲突的问题。这主要是因为swiper组件默认会捕获所有的触摸事件来进行左右滑动切换，这可能会阻止内部的scroll-view进行上下滚动。

为了解决这个问题，我们可以尝试通过一些技巧来让内部的scroll-view能够正常滚动。以下是一个可能的解决方案，使用catchtouchmove事件来阻止swiper对特定区域的触摸事件捕获：

<template>
  <view class="container">
    <swiper :autoplay="false" :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in items" :key="index">
        <view class="swiper-content">
          <!-- 使用catchtouchmove阻止swiper捕获这个区域的滑动事件 -->
          <scroll-view scroll-y="true" class="scroll-view" catchtouchmove="handleCatchTouchMove">
            <view v-for="(subItem, subIndex) in item.subItems" :key="subIndex" class="list-item">
              {{ subItem }}
            </view>
          </scroll-view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { subItems: ['Item 1-1', 'Item 1-2', 'Item 1-3', /* ...more items... */] },
        { subItems: ['Item 2-1', 'Item 2-2', 'Item 2-3', /* ...more items... */] },
        // ...more swiper items...
      ]
    };
  },
  methods: {
    handleCatchTouchMove(e) {
      // 这个方法实际上不需要做任何操作，
      // 主要目的是通过catchtouchmove属性阻止swiper捕获这个区域的触摸事件
      // 从而允许scroll-view进行上下滚动
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
.swiper-content {
  height: 100%; /* 根据需要调整高度 */
}
.scroll-view {
  height: 100%; /* 根据需要调整高度 */
}
.list-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
</style>

在这个例子中，我们通过在scroll-view上使用catchtouchmove事件，并定义一个空的处理函数handleCatchTouchMove，来阻止swiper组件捕获这个区域的触摸事件。这样，当用户在这个区域内进行上下滑动时，事件将不会被swiper捕获，而是传递给内部的scroll-view，从而允许其进行正常的上下滚动。

回到顶部