DCMarvel
DCMarvel
  • 发布:2021-12-07 17:51
  • 更新:2021-12-15 15:26
  • 阅读:481

【报Bug】swiper + (waterfall/list) Android 端,横屏后在竖屏影响 (waterfall/list) 滚动位置

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.2.16

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: 小米

手机机型: 9

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

index.nvue

<template>  
    <view class="content">  
        <swiper style="height: 300px;">  
            <swiper-item>  
                <waterfall column-count="2" column-width="auto">  
                    <cell v-for="(num, index) in lists" :key="index">  
                        <navigator url="play" class="list" :class="index % 2 == 1 ? 'bgc1' : 'bgc2'">  
                            <text>{{ num }}</text>  
                        </navigator>  
                    </cell>  
                </waterfall>  
            </swiper-item>  
            <swiper-item>  
                <waterfall column-count="2" column-width="auto">  
                    <cell v-for="(num, index) in lists" :key="index">  
                        <navigator url="play" class="list" :class="index % 2 == 1 ? 'bgc1' : 'bgc2'">  
                            <text>{{ num }}</text>  
                        </navigator>  
                    </cell>  
                </waterfall>  
            </swiper-item>  
        </swiper>  
                <swiper style="height: 300px;">  
            <swiper-item>  
                <list>  
                    <cell v-for="(num, index) in lists" :key="index">  
                        <navigator url="play" class="list" :class="index % 2 == 1 ? 'bgc1' : 'bgc2'">  
                            <text>{{ num }}</text>  
                        </navigator>  
                    </cell>  
                </list>  
            </swiper-item>  
            <swiper-item>  
                <list>  
                    <cell v-for="(num, index) in lists" :key="index">  
                        <navigator url="play" class="list" :class="index % 2 == 1 ? 'bgc1' : 'bgc2'">  
                            <text>{{ num }}</text>  
                        </navigator>  
                    </cell>  
                </list>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            lists: ['A', 'B', 'C', 'D', 'E', 'A1', 'B1', 'C1', 'D1', 'E1', 'A2', 'B2', 'C2', 'D2', 'E2', 'A3', 'B3', 'C3', 'D3', 'E3', 'A4', 'B4', 'C4', 'D4', 'E4']  
        };  
    },  
    onLoad() {},  
    methods: {}  
};  
</script>  

<style>  
.list {  
    height: 240px;  
    margin: 5px;  
}  
.bgc1 {  
    background-color: rgba(255, 255, 0, 0.5);  
}  
.bgc2 {  
    background-color: rgba(0, 255, 255, 0.5);  
}  
</style>

play.vue

<template>  
    <view>  
        <video src="https://www.w3school.com.cn/i/movie.mp4" controls></video>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

操作步骤:

预期结果:

(waterfall/list) 滚动位置不变

实际结果:

(waterfall/list) 滚动位置回到顶部

bug描述:

页面一: (waterfall/list) 滚动到任意位置 转跳
页面二: 播放视频 并全屏 在 返回
页面一: (waterfall/list) 回到顶部
主要Android端,ios未复现
怀疑是修复此BUG 引出的新BUG

2021-12-07 17:51 负责人:DCloud_Android_ST 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

请提供完整示例项目

  • DCMarvel (作者)

    代码我不是发了么.....

    下边附件是代码及录屏视频.

    2021-12-07 18:42

  • DCloud_Android_ST

    回复 DCMarvel: 以后直接提供demo然我们闭嘴只复现问题就好了。相对来说响应速度和bug确认会更快

    2021-12-07 19:02

  • DCloud_Android_ST

    大致原因清楚了 因为横竖屏导致重新排版 我们看下问题如何解决

    2021-12-07 19:08

DCMarvel

DCMarvel (作者)

代码及演示

DCloud_Android_ST

DCloud_Android_ST

HX3.3.1 alpha已修复

  • DCMarvel (作者)

    正式版何时发布...

    2021-12-15 15:38

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