uni-app 实现锚点
时间: 2023-02-25 12:09:04 浏览: 173
uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件
5星 · 资源好评率100%
Uni-app 可以通过以下步骤实现锚点:
1. 在需要添加锚点的元素上添加 id 属性。例如:
```
<view id="section1">...</view>
```
2. 在需要跳转到该元素的地方添加 a 标签,并设置 href 属性为 "#section1"。例如:
```
<a href="#section1">跳转到 section1</a>
```
3. 在需要跳转的页面的 script 标签中,添加以下代码以监听 a 标签的点击事件:
```
document.querySelectorAll('a').forEach(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault()
var target = item.getAttribute('href')
document.querySelector(target).scrollIntoView({
behavior: 'smooth'
})
})
})
```
这样,就可以实现点击 a 标签时,页面平滑滚动到指定的锚点元素了。
阅读全文