uni scroll-view滑动到最底层

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

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

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

scrollToBottom: function () {
					let query = uni.createSelectorQuery();
//这个是你所有渲染的view 的高度 下面自己添加样式的 边距之类的数据
					query.in(this).selectAll('.main-item').boundingClientRect();
//这个是id
					query.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-top="scrollTop" 字段就可以滑动了

但是每次渲染 就需要调用

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

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

 

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

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

 

你可能感兴趣的:(uni)