在swiper-item当中使用scroll-view，内容高于屏幕高度，无法完整滚动视图

<template>  
    <scroll-view :style="{backgroundColor: '#f9f9f9', padding: '10px', width: '100%'}">  
        <view style="flex-direction: row; width: 100%;">  
            <text style="border-bottom: 5px solid #00c0d5; margin-bottom: 10px;">{{this.$t('message.moduleInformation')}}</text>  
            <view style="flex: 1;"></view>  
        </view>  
        <view style=" background-color: #ffffff; border-radius: 10px; padding: 10px; width: 100%; border: 0.5px; border-color: #dedede; border-style: solid;">  
            <view style="flex-direction: row;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.moduleName')}}</text>  
                <text ref="nameText" style="margin-left: 10px; color: grey;">{{getBleNameString}}</text>  
            </view>  
            <view style="flex-direction: row;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.moduleMac')}}</text>  
                <text style="margin-left: 10px; color: grey;">{{getBleAddressString}}</text>  
            </view>  
            <view style="flex-direction: row;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.moduleType')}}</text>  
                <text style="margin-left: 10px; color: grey;">{{getBleTypeString}}</text>  
            </view>  
            <view style="flex-direction: row;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.connectStatus')}}</text>  
                <text style="margin-left: 10px; color: grey;">{{getBleStatusString}}</text>  
            </view>  
            <view style="flex-direction: row;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.serviceCharacter')}}</text>  
                <text style="margin-left: 10px; color: grey;">{{getBleServerCharacter}}</text>  
            </view>  
            <view style="flex-direction: row;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.writeCharacter')}}</text>  
                <text style="margin-left: 10px; color: grey;">{{getBleWriteCharacter}}</text>  
            </view>  
            <view style="flex-direction: row;">  
                <text>{{this.$t('message.readCharacter')}}</text>  
                <text style="margin-left: 10px; color: grey;">{{getBleReadCharacter}}</text>  
            </view>  
        </view>  
        <view style="flex-direction: row; width: 100%; margin-top: 10px;">  
            <text style="border-bottom: 5px solid #00c0d5; margin-bottom: 10px;">{{this.$t('message.packetLossHandl')}}</text>  
            <view style="flex: 1;"></view>  
        </view>  
        <view style=" background-color: #ffffff; border-radius: 10px; padding: 10px; width: 100%; border: 0.5px; border-color: #dedede; border-style: solid;">  
            <view style="flex-direction: row; align-items: center;">  
                <text style="margin-bottom: 10px; margin-right: 20px;">{{this.$t('message.sendParameters')}}</text>  
                <l-stepper v-model="stepValue" theme="solid" iconRadius="50rpx" :max="10" style="padding: 0px;"/>  
            </view>  
            <text style="color: grey;">{{this.$t('message.packetLossHandlDetail')}}</text>  
        </view>  
        <view style="flex-direction: row; width: 100%; margin-top: 10px;">  
            <text style="border-bottom: 5px solid #00c0d5; margin-bottom: 10px;">{{this.$t('message.communicationSettings')}}</text>  
            <view style="flex: 1;"></view>  
        </view>  
        <view style=" background-color: #ffffff; border-radius: 10px; padding: 10px; width: 100%; border: 0.5px; border-color: #dedede; border-style: solid;">  
            <view style="flex-direction: row; align-items: center;">  
                <text style="margin-bottom: 10px; margin-right: 20px;">{{this.$t('message.transmissionVelocity')}}</text>  
                <l-radio-group v-model="currentSendSpeedType">  
                    <l-radio :value="1" :label="' ' + this.$t('message.highSpeed')" />  
                    <l-radio :value="2" :label="' ' + this.$t('message.middleSpeed')" />  
                    <l-radio :value="3" :label="' ' + this.$t('message.lowSpeed')" />  
                </l-radio-group>  
            </view>  
            <text style="color: #b11846; margin-top: 20px;">{{this.$t('message.transmissionVelocityDetail')}}</text>  
            <view style="flex-direction: row; align-items: center; margin-top: 20px;">  
                <text style="margin-bottom: 10px; margin-right: 20px;">{{this.$t('message.rcvData')}}</text>  
                <l-checkbox v-model="checkNewLine" icon="circle" style="margin-right: 20px;">{{" " + this.$t('message.checkNewLin')}}</l-checkbox>  
            </view>  
            <text style="color: grey; margin-top: 20px;">{{this.$t('message.rcvDataDetail')}}</text>  
            <view style="flex-direction: row; align-items: center; margin-top: 20px;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.timeInterval')}}</text>  
                <view :style="{padding: '1px', width: '50%', height: '20px', borderBottom: `1px solid ${currentFocusId == 'timeInterval' ? '#008080' : '#000000'}`}">  
                    <l-input v-model="timeIntervalValue" inputStyle="font-size: 22px" style="max-height: 18px; padding-left: 0px" @focus="inputGetFocus('timeInterval')" @blur="inputLostFocus"/>  
                </view>  
            </view>  
            <text style="color: grey; margin-top: 20px;">{{this.$t('message.timeIntervalDetail')}}</text>  
            <view style="flex-direction: row; align-items: center; margin-top: 20px;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.bluetoothCacheSize')}}</text>  
                <view :style="{padding: '1px', width: '50%', height: '20px', borderBottom: `1px solid ${currentFocusId == 'bluetoothCacheSize' ? '#008080' : '#000000'}`}">  
                    <l-input v-model="bluetoothCacheSizeValue" inputStyle="font-size: 22px" style="max-height: 18px; padding-left: 0px" @focus="inputGetFocus('bluetoothCacheSize')" @blur="inputLostFocus"/>  
                </view>  
            </view>  
            <view style="flex-direction: row; align-items: center; margin-top: 20px;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.sppCacheSize')}}</text>  
                <view :style="{padding: '1px', width: '50%', height: '20px', borderBottom: `1px solid ${currentFocusId == 'sppCacheSize' ? '#008080' : '#000000'}`}">  
                    <l-input v-model="sppCacheSizeValue" inputStyle="font-size: 22px" style="max-height: 18px; padding-left: 0px" @focus="inputGetFocus('sppCacheSize')" @blur="inputLostFocus"/>  
                </view>  
            </view>  
            <text style="color: grey; margin-top: 20px;">{{this.$t('message.cacheSizeDetail')}}</text>  
        </view>  
        <view style="flex-direction: row; width: 100%; margin-top: 10px;">  
            <text style="border-bottom: 5px solid #00c0d5; margin-bottom: 10px;">{{this.$t('message.codeFormat')}}</text>  
            <view style="flex: 1;"></view>  
        </view>  
        <view style=" background-color: #ffffff; border-radius: 10px; padding: 10px; width: 100%; border: 0.5px; border-color: #dedede; border-style: solid;">  
            <view style="flex-direction: row; width: 100%; margin-top: 10px;">  
                <text style="margin-bottom: 10px;">{{this.$t('message.codeFormat') + ':'}}</text>  
                <view style="flex: 1;"></view>  
            </view>  
            <view style="justify-content: center; align-items: center; margin-bottom: 10px;">  
                <l-radio-group v-model="currentCodeFormatType">  
                    <l-row>  
                        <l-col span="12" lStyle="margin-bottom: 20px"><l-radio :value="1" label=" UTF-8" /></l-col>  
                        <l-col span="12" lStyle="margin-bottom: 20px"><l-radio :value="2" label=" GBK" /></l-col>  
                        <l-col span="12"><l-radio :value="3" label=" ASCII" /></l-col>  
                        <l-col span="12"><l-radio :value="4" label=" Unicode" /></l-col>  
                    </l-row>  
                </l-radio-group>  
            </view>  
        </view>  
        <view style="flex-direction: row; width: 100%; margin-top: 10px;">  
            <text style="border-bottom: 5px solid #00c0d5; margin-bottom: 10px;">{{this.$t('message.otherInfo')}}</text>  
            <view style="flex: 1;"></view>  
        </view>  
        <text style="font-size: 15px; color: grey;">{{this.$t('message.firmName')}}</text>  
        <text style="font-size: 12px; color: grey;">{{netAddress}}</text>  
        <text style="font-size: 12px; color: grey;">{{versionInfo}}</text>  
        <view style="flex: 1; width: 100%;"></view>  
    </scroll-view>  
</template>  

<script>  
    import KLDSysUtil from '../../instance/KLDSysUtil'  
    import { bleDeviceType, bleDevice, KLDBleConnectedDevice } from '../../instance/KLDBleTool'  
    import { KLDBleStateObjc, bleConnectStatusType } from '../../state/KLDState'  
    import { reactive} from 'vue';  

    enum sendSpeedType {                                        // 发送速度类型  
        sendSpeedType_high   = 1,                               // 高速  
        sendSpeedType_middle = 2,                               // 中速  
        sendSpeedType_low    = 3                                // 低速  
    }  

    enum codeFormatType {                                       // 编码类型  
        codeFormatType_utf8    = 1,                             // UTF-8  
        codeFormatType_gbk     = 2,                             // GBK  
        codeFormatType_ascii   = 3,                             // ASCII  
        codeFormatType_unicode = 4                              // Unicode  
    }  

    export default {  
        data() {  
            return {  
                appHeight : 0,  
                stepValue : 0,                                  // 发送参数数据  
                currentSendSpeedType : 2,   // 当前发送速度  
                checkNewLine : true,                            // 是否检查换行  
                currentFocusId : "",                            // 当前聚焦的数据框Id  
                timeIntervalValue : "100",                      // 时间间隔（ms）  
                bluetoothCacheSizeValue : "1000",               // BLE蓝牙缓存大小  
                sppCacheSizeValue : "1500",                     // 2.0蓝牙缓存大小  
                currentCodeFormatType : 2,  // 当前编码格式  
                netAddress : "www.tcrystal.com",                // 公司网址  
                versionInfo : "Ver:10.0.1",                     // 版本信息  
            }  
        },  
        mounted () {  
            // this.appHeight = KLDSysUtil.getInstance().getAppHeight() - KLDSysUtil.getInstance().getNavBarHeight() - 45 - 64  
        },  
        computed: {  
            // 根据蓝牙状态返回文案  
            getBleStatusString() : string {  
                let blestatus = KLDBleStateObjc.bleConnectStatus  
                switch (blestatus) {  
                    case bleConnectStatusType.bleConnectStatusType_disConnect:  
                        return this.$t('message.bleDisConnected')  
                        break;  
                    case bleConnectStatusType.bleConnectStatusType_connecting:  
                        return this.$t('message.bleConnecting')  
                        break;  
                    case bleConnectStatusType.bleConnectStatusType_Connected:  
                        return this.$t('message.bleConnected')  
                        break;  
                    default:  
                        return "unknow"  
                        break;  
                }  
            },  

            // 获取连接设备名称  
            getBleNameString () : string {  
                return KLDBleConnectedDevice.name  
            },  

            // 获取连接设备地址  
            getBleAddressString () : string {  
                return KLDBleConnectedDevice.address  
            },  

            // 根据设备类型返回对应文案  
            getBleTypeString () : string {  
                let str = ""  
                if (KLDBleConnectedDevice.bleType == bleDeviceType.bleDeviceType_ble) {  
                    str = this.$t('message.bleMode')  
                }else if (KLDBleConnectedDevice.bleType == bleDeviceType.bleDeviceType_spp) {  
                    str = this.$t('message.sppMode')  
                }  
                return str  
            },  

            // 获取连接设备服务特征  
            getBleServerCharacter () : string {  
                return KLDBleConnectedDevice.serverCharacter  
            },  

            // 获取连接设备写入特征  
            getBleWriteCharacter () : string {  
                if (KLDSysUtil.getInstance().stringIsEmpty(KLDBleConnectedDevice.writeCharacter)) {  
                    return this.$t('message.noCharacter')  
                } else{  
                    return KLDBleConnectedDevice.writeCharacter  
                }  
            },  

            // 获取连接设备读取特征  
            getBleReadCharacter () : string {  
                if (KLDSysUtil.getInstance().stringIsEmpty(KLDBleConnectedDevice.readCharacter)) {  
                    return this.$t('message.noCharacter')  
                } else{  
                    return KLDBleConnectedDevice.readCharacter  
                }  
            },  

        },  
        methods: {  
            // 输入框获得焦点  
            inputGetFocus (focusId : string) {  
                this.currentFocusId = focusId  
            },  

            // 输入框失去焦点  
            inputLostFocus () {  
                this.currentFocusId = ""  
            },  

        }  
    }  
</script>  

<style>  

</style>

这当中有若干个view，内容高度很高，高于整个屏幕的高度，但是我发现我无法滚动到最上面，每次滚动都好像内容只能滚动1.5倍屏幕高度的样子。向上滚动到一定距离就无法滚动了。是我哪里写的有问题么，<scroll-view :style="{boxSizing: 'border-box', backgroundColor: '#f9f9f9', padding: '10px' }">当中加入height:100%或者一个固定的高度也无法滚动