快捷導(dǎo)航

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

更新時(shí)間：2023年10月08日 15:34:25 作者：TA遠(yuǎn)方

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

引言

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

問題呈現(xiàn)

官網(wǎng)uniapp文檔上說可以控制滾動(dòng)條，并沒有自動(dòng)滾動(dòng)到底部的設(shè)置選項(xiàng)，請(qǐng)看布局源代碼，如下，大多數(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,//滾動(dòng)條位置
				scrollViewHeight:300,//滾動(dòng)視圖的高度
				//...
			};
		},
		//...
	}
</script>

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

解決方案

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

<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>

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

export default {
	data() {
		return {
			images:[],
			scrollTop:0,//滾動(dòng)條位置
			scrollViewHeight:300,//滾動(dòng)視圖的高度
			//...
		};
	},
	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()
			})
		}
	}
}

注意事項(xiàng)

需要注意組件scroll-view的屬性設(shè)置

需要設(shè)置固定高度,這樣視圖里面內(nèi)容當(dāng)只有超過該高度才會(huì)有滾動(dòng)效果
需要設(shè)置scroll-with-animation=true，可以出現(xiàn)慢慢滾動(dòng)到底部效果

總結(jié)

到此這篇關(guān)于uniapp中scroll-view實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部的文章就介紹到這了,更多相關(guān)uniapp scroll-view自動(dòng)滾動(dòng)最底部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: