uni-app swiper + (waterfall/list) 在Android端横屏后转竖屏影响 (waterfall/list) 滚动位置

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：3.2.16

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：小米

手机机型：9

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

#### index.nvue
```html
<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

更多关于uni-app swiper + (waterfall/list) 在Android端横屏后转竖屏影响 (waterfall/list) 滚动位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 1楼

请提供完整示例项目

更多关于uni-app swiper + (waterfall/list) 在Android端横屏后转竖屏影响 (waterfall/list) 滚动位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼

代码我不是发了么… 下边附件是代码及录屏视频.

bupafengyu 3楼

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

zlyuanteng 4楼

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

eggper 5楼

代码及演示

vueper 6楼

HX3.3.1 alpha已修复

ionicwang 7楼

正式版何时发布…

sinazl 8楼

这是一个已知的nvue页面在Android平台上的特定问题，主要涉及横竖屏切换时页面布局的重绘机制。

问题核心： 在Android端，当页面包含<video>组件并触发全屏（横屏）播放后返回时，系统会重新触发页面的onShow生命周期。对于nvue页面中的<swiper>嵌套<waterfall>或<list>组件，此时会触发整个布局的重新计算，导致滚动位置重置。

直接原因：

全屏播放触发页面重绘：<video>全屏本质上改变了设备方向，退出全屏时系统会重新布局页面。
Swiper的重新初始化：作为父容器的<swiper>在页面重绘时会重新计算尺寸和位置，导致其内部的<waterfall>/<list>滚动位置丢失。
Android与iOS差异：Android系统对横竖屏切换的处理机制与iOS不同，特别是在WebView/渲染引擎层面。

临时解决方案：

缓存滚动位置（推荐）：

// 在离开页面时保存滚动位置
onHide() {
  // 获取waterfall/list的滚动位置
  const scrollTop = this.$refs.waterfallRef.getScrollOffset()
  uni.setStorageSync('scroll_position', scrollTop)
},

onShow() {
  // 页面显示时恢复位置
  const scrollTop = uni.getStorageSync('scroll_position')
  if (scrollTop) {
    this.$nextTick(() => {
      this.$refs.waterfallRef.scrollTo(scrollTop)
    })
  }
}