uni-app 编译成百度小程序真机调试时 pageScrollTo 未滚动到最底部

uni-app 编译成百度小程序真机调试时 pageScrollTo 未滚动到最底部

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX 
## 示例代码：

```vue
<template>  
    <view class="chatroom">  
        <view class="bottom">  
            <button type="default" @click="send">发送</button>  
        </view>  
        <view class="message-item" v-for="item in messages">  
            <text>{{item.payload}}</text>  
        </view>   
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                messages:[  
                    { payload: '123' },  
                    { payload: '456' },  
                    { payload: 'lalal' },  
                    { payload: 'xixixi' }  
                ]  
            }  
        },  
        methods: {  
            send () {  
                // 发送一条  
                this.messages.push({payload:'一条新消息'+this.messages.length})  
                this.$nextTick(function(){  
                    uni.pageScrollTo({  
                        scrollTop: 2000000,  
                        duration : 10  
                    })  
                });  
            },  
        }  
    }  
</script>

操作步骤：

以上这个例子就可以复现，运行到百度开发者工具，然后真机调试。

预期结果：

发送消息滚动到底部

实际结果：

滚动但未滚动到新消息的底部，需要手动滑一下才是最新消息。

bug描述：

聊天对话框，在做发送消息滚动到底部的功能，使用的是uni.pageScrollTo，在编译成百度小程序真机调试的时候发现消息滚动了但是未滚动到最底部。（uniapp、微信小程序、百度开发者工具功能皆正常）。


更多关于uni-app 编译成百度小程序真机调试时 pageScrollTo 未滚动到最底部的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

HX3.1.21 Alpha，使用 百度开发者工具 3.34.1 基础库3.310.35测试没有发现此问题。

更多关于uni-app 编译成百度小程序真机调试时 pageScrollTo 未滚动到最底部的实战教程也可以访问 https://www.itying.com/category-93-b0.html


真机吗？开发者工具里就是没有问题

发送了以后手指往下滑你会发现还有一条消息在底部

回复 汉堡王: 是真机调试的。调用后确实也可以到页面底部，再往上滑动页面已经不会动了。

回复 DCloud_UNI_LXH: 您可以把测试的demo提供给我吗？我这边确实有这个问题

回复 汉堡王: 我不清楚你的情况，测试的demo是给了一个超出屏幕的高度，然后pageScrollTo到底部。

回复 DCloud_UNI_LXH: 我们这里滚动的内容是一个动态生成的列表

回复 汉堡王: 可能是调用时机的问题，延迟一下看看？

在百度小程序真机环境中，pageScrollTo 滚动异常是已知的平台兼容性问题。百度小程序底层对滚动位置计算存在偏差，导致传入的 scrollTop 值未能准确对应实际内容高度。

解决方案：

  1. 使用选择器定位
    通过 uni.createSelectorQuery() 获取消息容器的实际高度，动态计算滚动位置：

    this.$nextTick(() => {
  const query = uni.createSelectorQuery().in(this);
  query.select('.chatroom').boundingClientRect(rect => {
    uni.pageScrollTo({
      scrollTop: rect.height,
      duration: 300
    });
  }).exec();
});

  2. 增加滚动延迟
    百度小程序渲染周期较长，可适当延长 $nextTick 后的执行延迟：

    setTimeout(() => {
  uni.pageScrollTo({ scrollTop: 100000, duration: 400 });
}, 100);
回到顶部