uni-app 小程序上下滑动问题的解决

uni-app 小程序上下滑动问题的解决

swiper套用swiper-item，可以进行横向滑动切换tab，但是每一个swiper-item里无法上下滑动

问题分析

<原版结构图片>

数据没有获取到，页面只得到了当前页的数据

检查发现，所有数据均已获取

swiper高度没有固定

(继承父元素)可能没有高度固定，高度应该绑定当前屏幕高度

<template>
    <swiper
        class="swiper-box"
        :current="swiperCurrent"
        :style="{ height: swiperHeight }"
      >
</template>
uni.getSystemInfo({
      //获取系统信息
      success: (res) => {
        this.swiperHeight = res.windowHeight + "px";
      },
      fail: (res) => {
        console.log("error");
      },
    });
复制代码

使用后，依然出现了屏幕无法上下滑动的问题

检查页面结构

<swiper>
    <swper-item>
        <view calss="tab-page">
            <scroll-view>
                <view class="page-box"></view>
            </scroll-view>
        </view>
    </swper-item>
</swiper>
复制代码

应该为page-box包裹tab-page

解决问题

改变结构

<swiper>
    <swper-item>
            <scroll-view>
                <view class="page-box">
                    <view calss="tab-page">
                    </view>
                </view>
            </scroll-view>
    </swper-item>
</swiper>
复制代码

参考博客

关于uniapp使用swiper及swiper-iteam及scroll-view上下滑动及宽高问题（一）