uniapp描点定位

文章描述:

uniapp实现描点定位功能


template

<template>
	<view>
		<scroll-view class="lists" scroll-y="true" :scroll-into-view="intoView" scroll-with-animation="true" >
			<view class="item" v-for="(item, index) in arr" :key="index" :id='"text" + (index+1)'>{{ item }}</view>
		</scroll-view>
		<view class="p-l">
			<view @tap="move(1)">A</view>
			<view @tap="move(2)">B</view>
			<view @tap="move(3)">C</view>
			<view @tap="move(4)">D</view>
			<view @tap="move(5)">E</view>
			<view @tap="move(6)">F</view>
		</view>
	</view>
</template>

script

	export default {
		data() {
			return {
				arr: ['A','B','C','D','E','F'],
				intoView: ''
			}
		},
		methods: {
			move(num) {
				this.$nextTick(()=> {
					this.intoView = "text" + num
					console.log(this.intoView)
				})
			}
		}
	}

style

.p-l{
	position: absolute;
	top: 50%;
	right: 6upx;
	width: 100upx;
}
.p-l view{
	padding: 20upx;
	background: #13CE66;
	text-align: center;
	margin-bottom: 2upx;
	color: #fff;
}
.lists{
	height: 1200upx;
}
.item{
	height:1200upx;
	background: #F7B500;
}

 

发布时间:2021/11/29

发表评论