uni-app uniappx uvue页面调用uni.pageScrollTo报错 如果不进行手动滚动一下页面 则一直报错

uni-app uniappx uvue页面调用uni.pageScrollTo报错 如果不进行手动滚动一下页面 则一直报错

操作步骤：

```bash
<template>  
    <!-- #ifdef APP -->  
    <scroll-view style="flex:1">  
    <!-- #endif -->  
        <view @click="onTop">  
            <text v-for="(n,i) in list" :class="['txt_'+i]">  
                {{n}}  
            </text>  
        </view>  
    <!-- #ifdef APP -->  
    </scroll-view>  
    <!-- #endif -->  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list:[] as string[]  

            }  
        },  
        created() {  
            for(let i=0;i<50;i++) {  
                this.list.push(i+':可以滚动到指定的scrollTop值处，也可以滚动到指定的目标元素处')  
            }  
        },  
        methods: {  
            onTop(){  
                uni.pageScrollTo({  
                    selector:'.txt_30'  
                })  
            },  
        }  
    }  
</script>  
```

### 预期结果：
``` 
可以不需要手动滚动一下
```

### 实际结果：
``` 
必须要手动滚动一下页面，才能正确运行uni.pageScrollTo
```

### bug描述：
uniappx uvue页面调用uni.pageScrollTo报错，如果不进行手动滚动一下页面，则一直报错,多点击几次会出现大段错误
```
02:46:37.642 error: java.lang.ClassCastException: java.lang.String cannot be cast to java.lang.Number
02:46:37.642 at pages/demo/demo.uvue:30:4
...
```

更多关于uni-app uniappx uvue页面调用uni.pageScrollTo报错 如果不进行手动滚动一下页面 则一直报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uniappx uvue页面调用uni.pageScrollTo报错 如果不进行手动滚动一下页面 则一直报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的页面渲染时机问题。在uni-app x的uvue页面中，uni.pageScrollTo需要在页面完全渲染完成后才能正常调用。

当页面初次加载时，虽然DOM已经创建，但滚动容器可能还未完全初始化。手动滚动后触发了容器的重新计算，此时pageScrollTo才能正确定位目标元素。

解决方案：

  1. 使用$nextTick延迟执行：
onTop(){
    this.$nextTick(() => {
        uni.pageScrollTo({
            selector:'.txt_30'
        })
    })
}
  1. 添加setTimeout确保渲染完成：
onTop(){
    setTimeout(() => {
        uni.pageScrollTo({
            selector:'.txt_30'
        })
    }, 50)
}
回到顶部