uni-app 滾動到指定位置的操作方法

更新時間：2024年05月13日 15:03:23 作者：江-月*夜

這篇文章主要介紹了uni-app 滾動到指定位置的操作方法,其中方法一是使用標簽,可以將頁面橫向（或縱向）滾動到指定位置還有其他多種方法,需要的朋友可以參考下

方法1：使用標簽，可以將頁面橫向（或縱向）滾動到指定位置
無法滾動將代碼放在setTimeout，nextTick里執(zhí)行

<!-- 左邊 -->
			<scroll-view show-scrollbar="false" scroll-y="true" class="left-box"
				:scroll-top="scrollLeftTop" scroll-with-animation="true">
				<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
					:id="'scroll' + activeLeftTab" :class="{'active':activeLeftTab==item.id}">
					{{item.name}}
				</view>
			</scroll-view>

data(){
return {
servicesLeftList:[],
scrollLeftTop：0,，//滾動位置
activeLeftTab:"" //選中的樣式
}
}
getData() {
	//接口
	getServicesTree().then(res => {
		this.servicesLeftList= res.data
		res.data.forEach((item, ind) => {
				setTimeout(()=>{
					uni.createSelectorQuery().in(this).select('#scroll' + item.id)
						.boundingClientRect(res => {
							scrollLeftTop.value = 65 * ind; // 設置滾動條距離左側的距離    				        
						}).exec()
				},100)
		})
	})
}

方法二使用uni.pageScrollTo 使頁面縱向滾到到指定位置
建議設置height為auto :height:auto

<view class="left-box" >
				<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
					 :class="{'active':activeLeftTab==item.id}">
					{{item.name}}
				</view>
			</view>
//方法
uni.pageScrollTo({
	scrollTop: 0,
	duration: 500
});

方法三用scroll-view描點

 //左邊 :scroll-top="scrollLeftTop"
<scroll-view scroll-y="true" class="left-box" scroll-with-animation="true"
	:scroll-into-view="tracingLeftPoint">
	<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
		:id="'scroll' + item.id" :class="{'active':activeLeftTab==item.id}">
		{{item.name}}
	</view>
</scroll-view>
//方法
data(){
	retrun {
		tracingLeftPoint:"",//描點id
	}
}
	getData() {
	//接口
		getServicesTree().then(res => {
			this.servicesLeftList= res.data
			res.data.forEach((item, ind) => {
					setTimeout(()=>{
						this.tracingLeftPoint= 'scroll' + item.id
					},200)
			})
		})
	}

到此這篇關于uni-app 滾動到指定位置的文章就介紹到這了,更多相關uni-app 滾動到指定位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: