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
发表评论