uniapp中scroll-view實現(xiàn)自動滾動到最底部的方法

更新時間：2023年10月08日 15:34:25 作者：TA遠方

這篇文章主要給大家介紹了關于uniapp中scroll-view實現(xiàn)自動滾動到最底部的相關資料,在uniapp日常開發(fā)的過程中經(jīng)常會有局部滾動的需求，而scroll-view組件正好可以滿足這一需求,需要的朋友可以參考下

引言

在做uniapp項目中，有個滾動視圖組件scroll-view，跟微信小程序里的組件一樣的，想要實現(xiàn)自動滾動到最底部，是一件容易忽略的，小事情。

問題呈現(xiàn)

官網(wǎng)uniapp文檔上說可以控制滾動條，并沒有自動滾動到底部的設置選項，請看布局源代碼，如下，大多數(shù)可能都是這樣寫的

<template>
	<view>
		<scroll-view class="scroll-view" :style="{height:scrollViewHeight+'px'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
				<block v-for="(item,index) in images" :key="index">
					<image class="item" :src="item.src" mode="aspectFill"></image>
				</block>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				images:[],
				scrollTop:0,//滾動條位置
				scrollViewHeight:300,//滾動視圖的高度
				//...
			};
		},
		//...
	}
</script>

雖然可以控制滾動條位置，但是，不知道滾動視圖框內(nèi)的內(nèi)容高度，要怎么精準控制滾動條位置呢

解決方案

通過各種嘗試，認為最好的方案就是，在滾動視圖組件內(nèi)再加一層view視圖，布局改動后，源代碼如下

<template>
	<view>
		<scroll-view class="scroll-view" :style="{height:scrollViewHeight+'px'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
			<view id="scroll-view-content">
				<block v-for="(item,index) in images" :key="index">
					<image class="item" :src="item.src" mode="aspectFill"></image>
				</block>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	//此處省略...
</script>

還有，實現(xiàn)滾動底部的處理方法scrollToBottom()，代碼如下

export default {
	data() {
		return {
			images:[],
			scrollTop:0,//滾動條位置
			scrollViewHeight:300,//滾動視圖的高度
			//...
		};
	},
	mounted() {
		let i = 10;
		do{
			this.images.push({
				src:'../../static/test.jpg',
				//...
			});
			i--;
		}while(i>0);
	},
	//...
	methods:{
		scrollToBottom(){
			this.$nextTick(()=>{
				uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res)=>{
					let top = res.height-this.scrollViewHeight;
					if(top>0){
						this.scrollTop=top;
					}
				}).exec()
			})
		}
	}
}