3***@qq.com
3***@qq.com
  • 发布:2020-06-29 10:33
  • 更新:2020-06-29 14:46
  • 阅读:863

【报Bug】安卓APP端 在scroll-view中, 当触发scroll-into-view 后,scroll-view中 如果包含地图和视频,地图和视频将变为空白层

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.4.2

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: MATE20

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="content">  
        <scroll-view scroll-y="true" :scroll-into-view="toView" scroll-with-animation="true" style="height: 100vh;">  
            <!-- <lsycdd :arrayche="arrayche" :zhuye='true' :xiangqing='0' ></lsycdd> -->  
            <view class="anniuceng mokuai-duiqi">   
                <view class="aaitem" @tap="yyjl">违规/预警   
                    <view class="yjts" v-if='shuliang > 0'>{{shuliang}}</view>  
                </view>  
                <view class="aaitem zjc" @tap="tiao('yjcl')">应急处理</view>  
                <view class="aaitem"  @tap="tiao('scrz')">上传日志</view>  
            </view>  
            <view class="sekuai"></view>  
            <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>  
            <view class="sekuai"></view>  
            <view class="xxc">  
                起点详情:<text style="color: #999;">山东济南凤凰北街236号山东济南凤凰北街236号山东济南凤凰北街236号山东济南凤凰北街236号山东济南凤凰北街236号</text>  
            </view>  
            <view class="xxc">  
                终点详情:<text style="color: #999;">山东济南凤凰北街236号山东济南凤凰北街236号山东济南凤凰北街236号山东济南凤凰北街236号山东济南凤凰北街236号</text>  
            </view>  
            <video class="video" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>  
            <view class="sekuai"></view>  
            <view class="xxc">  
                运费:<text style="color: #999;">1954.00元</text>  
            </view>  
            <view class="xxc">  
                结算方式:<text style="color: #999;">卸货结算</text>  
            </view>  
            <view class="xxc">  
                订单备注:<text style="color: #999;">备注信息备注信备注信息</text>  
            </view>  
            <view class="sekuai"></view>  
            <view class="xxc">  
                企业联系人:<text style="color: #999;">王先生</text>  
            </view>  
            <view class="xxc" @tap='diph'>  
                企业联系电话:<text style="color: #999;">17609502766</text> <image src="../../../static/iph.png" class="iph" mode=""></image>  
            </view>  
            <view class="sekuai"></view>  
            <view class="xxc">  
                运输员:<text style="color: #999;">徐先生</text>  
            </view>  
            <view class="xxc" @tap='diph'>  
                运输员联系电话:<text style="color: #999;">17609502766</text> <image src="../../../static/iph.png" class="iph" mode=""></image>  
            </view>  
            <view class="sekuai"></view>  
            <view class="xxc">  
                押运员:<text style="color: #999;">隔壁老李</text>  
            </view>  
            <view class="xxc" @tap='diph'>  
                押运员联系电话:<text style="color: #999;">17609502766</text> <image src="../../../static/iph.png" class="iph" mode=""></image>  
            </view>  
            <view class="sekuai"></view>  
            <view class="xxc">  
                日志记录:  
            </view>  

            <!-- 时间步骤层 -->  
            <view class="sjx mokuai-row">  
                <view class="riqi">  
                    <view class="yue">12/31</view>  
                    <view class="nian">2019</view>  
                </view>  
                <view class="cons">  
                    <view class="list">  
                        <view class="mctime">隔壁老李 12:30</view>  
                        <view class="nr"> XXXXXX内容简介内容简介 </view>  
                        <view class="tp mokuai-pailie" >  
                            <image class="tpimg"  v-for=" (item,index) in imglist" :key='item[index]'  @tap="previewImage(index)" :src="item" mode="aspectFill"></image>  
                        </view>  
                        <view class="dian"></view>  
                    </view>  
                    <view class="list">  
                        <view class="mctime">隔壁老李 12:30</view>  
                        <view class="nr"> XXXXXX内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介 </view>  
                        <view class="tp mokuai-pailie" >  
                            <image class="tpimg"  v-for=" (item,index) in imglist" :key='item[index]'  @tap="previewImage(index)" :src="item" mode="aspectFill"></image>  
                        </view>  
                        <view class="dian"></view>  
                    </view>  
                </view>  
            </view>  
            <view class="sjx mokuai-row">  
                <view class="riqi">  
                    <view class="yue">12/31</view>  
                    <view class="nian">2019</view>  
                </view>  
                <view class="cons">  
                    <view class="list">  
                        <view class="mctime">隔壁老李 12:30</view>  
                        <view class="nr"> XXXXXX内容简介内容简介 </view>  
                        <view class="tp mokuai-pailie" >  
                            <image class="tpimg"  v-for=" (item,index) in imglist" :key='item[index]'  @tap="previewImage(index)" :src="item" mode="aspectFill"></image>  
                        </view>  
                        <view class="dian"></view>  
                    </view>  
                    <view class="list">  
                        <view class="mctime">隔壁老李 12:30</view>  
                        <view class="nr"> XXXXXX内容简介内容简介 </view>  
                        <view class="tp mokuai-pailie" >  
                            <image class="tpimg"  v-for=" (item,index) in imglist" :key='item[index]'  @tap="previewImage(index)" :src="item" mode="aspectFill"></image>  
                        </view>  
                        <view class="dian"></view>  
                    </view>  
                </view>  
            </view>  
            <!-- 时间步骤层 -->  

            <view class="sekuai"></view>  
            <view class="xxc" id='yyjl'>  
                预警记录:  
            </view>  

            <!-- 时间步骤层 -->  
            <view class="sjx mokuai-row">  
                <view class="riqi">  
                    <view class="yue">12/31</view>  
                    <view class="nian">2019</view>  
                </view>  
                <view class="cons">  
                    <view class="list">  
                        <view class="mctime">隔壁老李 12:30</view>  
                        <view class="nr"> XXXXXX内容简介内容简介 </view>  
                        <view class="tp mokuai-pailie" >  
                            <image class="tpimg"  v-for=" (item,index) in imglist" :key='item[index]'  @tap="previewImage(index)" :src="item" mode="aspectFill"></image>  
                        </view>  
                        <view class="dian"></view>  
                    </view>  
                    <view class="list">  
                        <view class="mctime">隔壁老李 12:30</view>  
                        <view class="nr"> XXXXXX内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介 </view>  
                        <view class="tp mokuai-pailie" >  
                            <image class="tpimg"  v-for=" (item,index) in imglist" :key='item[index]'  @tap="previewImage(index)" :src="item" mode="aspectFill"></image>  
                        </view>  
                        <view class="dian"></view>  
                    </view>  
                </view>  
            </view>  
            <view class="sjx mokuai-row">  
                <view class="riqi">  
                    <view class="yue">12/31</view>  
                    <view class="nian">2019</view>  
                </view>  
                <view class="cons">  
                    <view class="list">  
                        <view class="mctime">隔壁老李 12:30</view>  
                        <view class="nr"> XXXXXX内容简介内容简介 </view>  
                        <view class="tp mokuai-pailie" >  
                            <image class="tpimg"  v-for=" (item,index) in imglist" :key='item[index]'  @tap="previewImage(index)" :src="item" mode="aspectFill"></image>  
                        </view>  
                        <view class="dian"></view>  
                    </view>  
                    <view class="list">  
                        <view class="mctime">隔壁老李 12:30</view>  
                        <view class="nr"> XXXXXX内容简介内容简介 </view>  
                        <view class="tp mokuai-pailie" >  
                            <image class="tpimg"  v-for=" (item,index) in imglist" :key='item[index]'  @tap="previewImage(index)" :src="item" mode="aspectFill"></image>  
                        </view>  
                        <view class="dian"></view>  
                    </view>  
                </view>  
            </view>  
            <!-- 时间步骤层 -->  
        </scroll-view>  

    </view>  
</template>  

<script>  

    export default {  
        components: {  

        },  
        data() {  
            return {  
                toView:'',  
                shuliang:12,  
                zhezhao:false,  
                arrayche:{id:'1234',qdsf:'浙江1',qdcs:'丽水',jl:'1991',zdsf:'黑龙江',zdcs:'萨哈哈哈',cls:'2',hwmc:'乙醇',hwzl:'10',fbrq:'2019/12/02 12:30',qyzp:'true'},  
                id:0, // 使用 marker点击事件 需要填写id  
                title: 'map',  
                latitude: 39.909,  
                longitude: 116.39742,  
                imglist:['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592888386454&di=8455beb7399a0aee47480e9af281c111&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F52%2F52%2F01200000169026136208529565374.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592888386454&di=cd51fb7dc762aae69f84ac9b7169ec4a&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Feaf81a4c510fd9f95f48a24b212dd42a2834a4b1.jpg'],  
                covers: [{  
                    latitude: 39.909,  
                    longitude: 116.39742,  
                    iconPath: '../../../static/qi.png'  
                }, {  
                    latitude: 39.90,  
                    longitude: 116.39,  
                    iconPath:  '../../../static/zhong.png'  
                    }]  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            tiao:function(e){  
                if(e=='yjcl'){  
                    uni.navigateTo({  
                        url:'/pages/dingdan/yjcl/yjcl'  
                    })  
                }else if(e='scrz'){  
                    uni.navigateTo({  
                        url:'/pages/dingdan/scrz/scrz'  
                    })  
                }  
            },  
            diph:function(){  
                uni.makePhoneCall({  
                    phoneNumber:'17609502766'  
                })  
            },  
            previewImage:function(e){  
                uni.previewImage({  
                    current:e, //预览图片的下标  
                    urls:this.imglist //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以  
                })  
            },  
            yyjl(){  
                this.toView = 'yyjl';  
                this.shuliang = 0  
            }  
        }  
    }   
</script>  

<style>  
    /* 时间步骤层开始*/  
    .sjx{width: 92%;margin: 0 auto;font-size:30rpx;padding-top: 20rpx;}  
    .riqi{width: 16%;}  
    .nian{font-size:25rpx ;color: #999;}  
    .yue{font-weight:bold ;color: #5287ff;}  
    .cons{width: 84%;}  
    .nr{color: #999;margin: 10rpx 0;}  
    .tpimg{width: 150rpx;height: 150rpx;margin-right: 10rpx;margin-bottom: 20rpx;}  
    .list{margin-bottom: 10rpx;padding-left: 25rpx;border-left:1px solid #eee ;position: relative;}  
    .tp{width: 100%;border-bottom: 1px dashed #eee;}  
    .dian{width: 15rpx;height: 15rpx;background-color: #5287FF;position: absolute;top:12rpx;left:-8rpx ;border-radius: 15rpx;}  
    /* 时间步骤层结算 */  
    .iph{width:34rpx;height: 34rpx;float: right ;margin-top: 8rpx;margin-right: 20rpx;}  
    .aaitem{width: 33%;position: relative;}  
    .yjts{position: absolute;width: 30rpx;height: 35rpx;line-height: 35rpx;font-size:25rpx ;border-radius:35rpx;text-align: center ;background-color: red;color: #fff;top: 0;right:30rpx;}  
    .zjc{border-left: 1px solid #eee;border-right:1px solid #eee ;}  
    .anniuceng{width: 92%;margin: 0 auto;line-height: 50rpx;height: 50rpx;text-align: center;font-size:30rpx ;padding: 25rpx 0 ;}  
    .video{width: 100%;}  
    .bzje{width: 100%;text-align: center;font-weight:bold ;font-size:70rpx;color: #5287ff;line-height: 100rpx;margin: 20rpx 0;margin-top: 60rpx;}  
    .xxlb{width: 70%;margin: 0 auto;font-size:25rpx;height: 50rpx ;}  
    .tctou{width: 100%;text-align: center;border-bottom: 1px solid #eee;height: 100rpx;line-height: 100rpx;}  
    .tcwei{width: 100%;height: 100rpx;border-top:1px solid #eee ;line-height: 100rpx;margin-top: 50rpx;}  
    .qr{width: 50%;text-align: center;color: #5287ff;font-weight:bold ;}  
    .qx{width: 50%;text-align: center;color: #999;border-right:1px solid #eee ;}  
    .tanchuang{width: 80%;background-color: #fff;margin: 0 auto;margin-top: 100rpx;border-radius:20rpx ;}  
    .zhezhao{width: 100%;height: 100vh;background-color: rgba(0,0,0,.5);position: fixed;z-index: 9999;top:0;left: 0;}  
    .tijiao{width: 100%;background-color: #1f6aff;line-height: 100rpx;text-align: center;position: fixed;bottom: 0;color: #fff;font-size:32rpx ;}  
    .sekuai{  
        width: 100%;  
        height: 10rpx;  
        background-color: #f3f3f3;  
    }  
    .sekuais{  
        width: 100%;  
        height: 150rpx;  
        background-color: #f7f7f7;  
    }  
    .xxc{  
        width: 92%;margin: 0 auto;font-size:30rpx;padding: 25rpx 0;line-height: 50rpx;  
        border-bottom: 1px solid #eee;  
    }  
.mokuai-row{  
      display: flex;  
      flex-direction:row;  
    }  
    .mokuai-duiqi{  
      display: flex;  
      flex-direction:row;  
      justify-content: space-between;  
    }  
    .mokuai-fxpailie{  
      display: flex;  
      flex-direction:row;  
      justify-content: flex-end;  
    }  
    .video{width: 100%;}  
    .mokuai-pailie{  
      display: flex;  
      flex-direction:row;  
      flex-wrap: wrap  
    }  
    .tijiao{width: 100%;background-color: #1f6aff;line-height: 100rpx;text-align: center;position: fixed;bottom: 0;color: #fff;font-size:32rpx ;}  
    .content{color: #565656;}  
</style>  

操作步骤:

打开新页面,点击 预警

预期结果:

视频/地图消失

实际结果:

视频/地图消失

bug描述:

安卓APP端 在scroll-view中, 当触发scroll-into-view 后,scroll-view中 如果包含地图和视频,地图和视频将变为空白层 (H5端没问题),以下示列中点击 违规/预警 会触发 页面定位,定位后,地图和视频消失

2020-06-29 10:33 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

看文档

该问题目前已经被锁定, 无法添加新回复