uniapp手机端页面滚动到最底部

最近用uniapp开发一个类似于微信聊天功能的手机端软件,在进入聊天页面时要求页面滚动到最底部,刚开始使用了下面的代码:
 uni.createSelectorQuery().select("自己的容器.box").boundingClientRect((res)=>{
      console.log(res)
      const scrollH = res.top;
  uni.pageScrollTo({
    duration: 100,// 过渡时间
    scrollTop: scrollH,// 滚动的实际距离
  })
}).exec()

  结果没有生效,即使我将scrollTop定义为一个固定的值,依旧没有生效,我查了资料,发现可能是设置的高度超过了实际的高度,于是给我的dom元素加上了一个边框,发现设置的值绝对在范围内,但它就是没有生效,我没有办法,就换了一种方式,使用如下代码:

uni.pageScrollTo({
    duration: 300,
    scrollTop: top 
});

  结果也是没有生效,即使我将scrollTop的值设定为固定的值,也没有效果。

  之后我发现还可以滚动到指定元素的位置,于是我在页面的最下方添加了一个dom

<view style="width: 100%;height: 1px;" class="count_big_box" id="count_big_box"></view>

  使用下面的方法:

uni.pageScrollTo({
     duration: 300,
     selector: '#count_big_box' 
});

这次可以了,滚动到页面最底部的问题解决了,但我依旧不知道为什么前两种方式会毫无反应,希望有人能帮我指正一下,谢谢。

posted @ 2024-09-03 10:12  冥·紫月  阅读(973)  评论(0编辑  收藏  举报