uniapp中scroll-view利用scroll-into-view實現錨點功能

<template>
	<view class="content">
		<scroll-view scroll-y="true" :scroll-into-view="intoindex" style="height: 300px;">
			<view v-for="(item,index) in content" :key='index' :id='"text"+index'>{{item+index}}</view>
		</scroll-view>
		<button type="primary" @tap="scroll">跳</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: ["珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮",
					"奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮",
					"奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮",
					"奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮",
					"奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮",
					"奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "珍珠奶茶", "鮮百香雙響炮",
					"奶茶三兄弟"
				],
				intoindex: '',
				num:10 //動態模擬需要跳到的位置
			}
		},
		onLoad() {

		},
		methods: {
			scroll() {
				this.num+=3
				this.$nextTick(()=> {
					this.intoindex = "text" + this.num
					console.log(this.intoindex)
				});
				this.intoindex=''  //不清空再次跳到錨點位置會不起作用
			}
		}
	}
</script>

<style>
	
</style>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章