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%,除非父元素写了高度。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了