uniapp如何实现锚点定位?

在scroll-view组件中有一个scroll-into-view属性:(值应为某子元素id。设置哪个方向可滚动,则在哪个方向滚动到该元素)。【官方scroll-view说明】

此属性的意思则是此属性的值为子元素设置的id时,则可跳转到子元素位置。
先看下效果:
请添加图片描述
直接上代码:
html:

<template>
	<view>
		<scroll-view scroll-y="true" :scroll-into-view="intoView" :style="`height: 200px`" scroll-with-animation="true">
			<view class="item" v-for="(item, index) in arr" :key="index" :id='"text" + (index+1)'>{{ item }}</view>
		</scroll-view>
		<button @tap="move(1)">点击移动至1</button>
		<button @tap="move(2)">点击移动至2</button>
		<button @tap="move(3)">点击移动至3</button>
		<button @tap="move(4)">点击移动至4</button>
		<button @tap="move(5)">点击移动至5</button>
		<button @tap="move(6)">点击移动至6</button>
	</view>
</template>

js:

<script>
	export default {
		data() {
			return {
				arr: [1,2,3,4,5,6],
				intoView: ''
			}
		},
		methods: {
			move(num) {
				this.$nextTick(()=> {
					this.intoView = "text" + num
					console.log(this.intoView)
				})
			}
		}
	}
</script>

【注意】需要注意的是scroll-view必须设置高度,不设置的话没效果,但不要设置100%,除非父元素写了高度。
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值