uni-app小程序开发-滚动到指定位置的实现方式

使用scroll-view标签

scroll-top

页面

代码语言：javascript复制

<scroll-view show-scrollbar="false" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true">
    <view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id">
        {{item.name}}
    </view>
</scroll-view>

数据

代码语言：javascript复制

data(){
    return {
        scrollTop:0,//滚动位置
    }
}

方法

代码语言：javascript复制

this.scrollTop = 300;

scroll-into-view

页面

代码语言：javascript复制

<scroll-view scroll-y="true" scroll-with-animation="true" :scroll-into-view="targetViewId">
	<view  v-for="(item,index) in servicesLeftList" :key="item.id" :id="'scroll'   item.id">
		{{item.name}}
	</view>
</scroll-view>

数据

代码语言：javascript复制

data(){
	retrun {
		targetViewId:"",//描点id
	}
}

方法

代码语言：javascript复制

this.targetViewId= 'scroll'   item.id;

使用uni.pageScrollTo

代码语言：javascript复制

<view class="left-box" >
    <view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
         :class="{'active':activeLeftTab==item.id}" :id="textarea" index>
        {{item.name}}
    </view>
</view>

JS

代码语言：javascript复制

uni.pageScrollTo({
	scrollTop: 0,
	duration: 500，
	selector: '#textarea5' //指定位置
});

滚动到底部

页面

代码语言：javascript复制

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

JS

代码语言：javascript复制

export default {
	data() {
		return {
			images:[],
			scrollTop:0,//滚动条位置
			scrollViewHeight:300,//滚动视图的高度
		};
	},
	methods:{
		scrollToBottom(){
			this.$nextTick(()=>{
				uni.createSelectorQuery().select('#scroll-view-content').boundingClientRect((rect)=>{
					let top = rect.height-this.scrollViewHeight;
					if(top>0){
						this.scrollTop=top;
					}
				}).exec()
			})
		}
	}
}

标签与滚动区联动

代码语言：javascript复制

<template>
	<view>
		<scroll-view class="myscrollview" scroll-y @scroll="onScroll" :scroll-top="scrollTop" scroll-with-animation="true">
			<view v-for="(item, index) in items" :key="index" :id="'item-'   index" class="scroll_item">
				<text>{{ item }}</text>
			</view>
		</scroll-view>

		<view class="tag_outer">
			<view v-for="(item, index) in items" :key="index" class="tag_item">
				<text :style="{ color: selectedIndex === index ? 'blue' : 'black' }" @click="scrollTo(index)">
					{{ item }}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			items: ['标签1', '标签2', '标签3', '标签4', '标签5'],
			selectedIndex: 0,
			scrollTop: 0
		};
	},
	onReady() {},
	methods: {
		getRect(selector) {
			return new Promise((resolve) => {
				uni.createSelectorQuery()
					.select(selector)
					.boundingClientRect((rect) => {
						resolve(rect);
					})
					.exec();
			});
		},
		onScroll(event) {
			const { scrollTop, scrollHeight } = event.detail;
			this.updateSelectedIndex(scrollTop, scrollHeight);
		},

		async updateSelectedIndex(scrollTop, scrollHeight) {
			let items = this.items;
			let outerRect = await this.getRect('.myscrollview');
			if (scrollTop   outerRect.height >= scrollHeight - 10) {
				// 滚动到底部
				this.selectedIndex = items.length - 1;
			} else {
				// 未滚动到底部
				items.forEach(async (_, index) => {
					let rect = await this.getRect(`#item-${index}`);
					if (rect) {
						const top = rect.top   scrollTop;
						const bottom = rect.bottom   scrollTop;
						// 判断当前可见区域
						if (scrollTop >= top && scrollTop < bottom) {
							this.selectedIndex = index;
						}
						if (index == items.length - 1) {
							if (scrollTop   rect.height >= scrollHeight - 10) {
								this.selectedIndex = index;
							}
						}
					}
				});
			}
		},
		async scrollTo(index) {
			this.selectedIndex = index;
			let rect = await this.getRect(`#item-${index}`);
			if (rect) {
				this.scrollTop = rect.top   this.scrollTop;
			}
		}
	}
};
</script>

<style>
.myscrollview {
	height: 300px;
	background-color: #f0f0f0;
}

.scroll_item {
	height: 200px;
	background-color: aquamarine;
	margin-bottom: 20rpx;
}

.tag_outer {
	margin-top: 20rpx;
	display: flex;
	width: 100%;
}

.tag_item {
	margin-left: 10px;
	border: 1rpx solid #ddd;
	padding: 10rpx 10rpx;
}
</style>

scroll view 开发 小程序 app

0 人点赞