当前位置: 代码迷 >> 综合 >> uni scroll-view滑动到最底层
  详细解决方案

uni scroll-view滑动到最底层

热度:9   发布时间:2023-12-04 07:29:03.0

一个简单的scroll-view滚动到底部例子

内部的scroll-into-view 应该是也可以的,但是要设置固定的滚动高度,如果不设置高度,只能使用scroll-top 计算高度

因为是计算高度,所以设置高度是可以 100%

scrollToBottom: function () {let query = uni.createSelectorQuery();
//这个是你所有渲染的view 的高度 下面自己添加样式的 边距之类的数据query.in(this).selectAll('.main-item').boundingClientRect();
//这个是idquery.in(this).select('#scrollview').boundingClientRect();query.exec((res) => {let mitemHeight = 0;
//累加所有元素的高度和边距res[0].forEach((rect) => mitemHeight = mitemHeight + rect.height + 40)  
//只有大于 滚动条的高度 再设置if (mitemHeight > that.solHeight) {  that.scrollTop = (mitemHeight + 100)}})}
<scroll-view scroll-y="true" id="scrollview" :scroll-top="scrollTop":scroll-with-animation="true"class="h100">

只要加上 :scroll-top="scrollTop" 字段就可以滑动了

但是每次渲染 就需要调用

使用 延迟加载 先渲染 再滑动,不然每次只能获取上一次渲染的数据

setTimeout(() => {
                   that.scrollToBottom();
                }, 100)

 

还有更优解,使用that.$nextTick 来替换setTimeout

that.$nextTick(function(){that.scrollToBottom();})

 

  相关解决方案