uni-app 安卓端 nvue页面swiper垂直下滑失效

uni-app 安卓端 nvue页面swiper垂直下滑失效

开发环境 版本号 项目创建方式
Windows win7 HBuilderX

操作步骤：

  • swiper竖向列表嵌入视频，下滑

预期结果：

  • 可以正常滑动

实际结果：

  • 无法下滑

bug描述：

  • swiper竖向列表嵌入视频，下滑只有点击中间位置才能滑动，点击两边无法滑动。并且先往上滑再往下滑就可以滑动。
1 回复

更多关于uni-app 安卓端 nvue页面swiper垂直下滑失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，swiper 组件默认是水平滑动的。如果你希望实现垂直滑动的效果，可以通过设置 swiper 的 vertical 属性来实现。以下是一个简单的示例：

<template>
  <swiper :vertical="true" :style="{height: '100%'}">
    <swiper-item>
      <view class="swiper-item">页面1</view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item">页面2</view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item">页面3</view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped>
.swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}
</style>
回到顶部