uni-app APP（安卓/IOS）scroll-view切换内容重复问题

测试过的手机

VIVO、华为鸿蒙、OPPO

示例代码：

<template>  
    <view class="content">  
        <view>  
            <scroll-view scroll-y style="height: 30vh">  
                {{content}}  
            </scroll-view>  
        </view>  
        <view>  
            <button @click="toggle('up')">上一条</button>  
            <button @click="toggle('down')">下一条</button>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                content: '',  
                currentIndex: 0,  
                conts: [  
                    '111111开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。',  
                    '222222滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}',  
                    '333333以下示例代码，来自于hello uni-app项目，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。'  
                ]  
            }  
        },  
        onLoad() {  
        this.content = this.conts[this.currentIndex] || ''  
        },  
        methods: {  
            toggle(type) {  
                let cIndex = this.currentIndex  
                console.log(type, cIndex, 2222)  
                switch (type) {  
                    case 'up':  
                        if (cIndex <= 0) cIndex = 0  
                        else cIndex -= 1  

                        break;  
                    case 'down':  
                        if (cIndex >= this.conts.length - 1) cIndex = this.conts.length - 1  
                        else cIndex += 1  
                        break;  
                }  
                this.currentIndex = cIndex  
                this.content = this.conts[cIndex] || ''  
            }  

        }  
    }  
</script>

操作步骤：

APP不能使用数据线，需要打包后，再打开APP操作

预期结果：

上一条/下一条，展示对应数据

实际结果：

由于scroll-view缓存问题，打包后运行APP，切换上一条/下一条时，内容不清除，拼接下一条内容

bug描述：

使用官网DEMO，可以查看代码在APP上一条/下一条时，之前内容不清除

信息类别	详细信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	4.0.8
HBuilderX类型	正式
HBuilderX版本号	4.08
手机系统	全部
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

eggper 1楼•3 天前

没人修复吗？

wuwangju 2楼•3 天前

加个key

songsunli 3楼•3 天前

针对uni-app中scroll-view组件在安卓和iOS平台上切换内容时可能出现的重复问题，这通常与数据更新和视图渲染的时序有关。以下是一个可能的解决方案，通过确保在内容切换时正确更新数据并重置scroll-view的位置，来避免内容重复显示的问题。

代码案例

假设我们有一个scroll-view组件，里面包含多个可切换的视图内容，每个视图内容通过v-for指令渲染。

1. 数据结构

首先，定义你的数据结构和当前显示的视图索引：

data() {
    return {
        currentIndex: 0, // 当前显示的视图索引
        viewContents: [
            { title: 'View 1', content: 'Content of View 1' },
            { title: 'View 2', content: 'Content of View 2' },
            // 更多视图内容...
        ]
    };
}

2. 模板部分

在模板中使用scroll-view和v-for来渲染视图内容：

<template>
    <view>
        <button @click="switchView(index)" v-for="(content, index) in viewContents" :key="index">
            {{ content.title }}
        </button>
        <scroll-view scroll-y="true" ref="scrollView">
            <view v-if="viewContents.length > 0">
                <text>{{ viewContents[currentIndex].content }}</text>
                <!-- 其他内容... -->
            </view>
        </scroll-view>
    </view>
</template>

3. 切换视图的方法

确保在切换视图时更新currentIndex，并可能需要重置scroll-view的位置（如果需要的话，这里假设不需要重置滚动位置）：

methods: {
    switchView(index) {
        this.currentIndex = index;
        // 如果需要重置scroll-view的位置，可以使用以下代码（视情况而定）
        // this.$refs.scrollView.scrollTop = 0; // 重置到顶部
    }
}

4. 注意事项

确保在数据更新（如从服务器获取新数据）后，正确设置currentIndex。
如果scroll-view中的内容包含复杂组件或大量数据，考虑使用虚拟列表（如uni-list或第三方库）来提高性能。
在iOS和安卓上测试，确保行为一致。有时平台差异可能导致不同表现，需要根据具体情况调整。

通过上述方法，可以有效避免scroll-view在切换内容时重复显示的问题。如果问题依旧存在，可能需要进一步检查数据绑定和视图渲染的逻辑。