标签：tail offset efault val png def 定位 case color
页面做了一个简单的锚点跳转，如下图，我对左侧的四项加了页面定位跳转，也就是跳转至锚点
代码比较简单，和js的DOM操作原理是一样的
<div class="order-view" ref="orderview">
<div class="order-nav">
<ul>
<li v-for="(item,index) in navList" :key="index" @click="goNavList(index)">{{item.name}}</li>
</ul>
</div>
<div class="order-detail">
<div class="form-content" ref="billinfo"></div>
<div class="form-content" ref="cust"></div>
<div class="form-content" ref="order"></div>
<div class="form-content" ref="prod"></div>
</div>
</div>
goNavList(val) { let height = 0; switch(val) { case 0: height = 0; break; case 1: height = this.$refs.billinfo.offsetHeight; break; case 2: height = this.$refs.billinfo.offsetHeight + this.$refs.cust.offsetHeight; break; case 3: height = this.$refs.billinfo.offsetHeight + this.$refs.cust.offsetHeight + this.$refs.order.offsetHeight; break; default: break; } this.$refs.orderview.scrollTop = height; },
我这里是利用了每个div元素的高度来实现定位
跳回至页面头部就更简单了
this.$refs.orderview.scrollTop = 0；
标签：tail offset efault val png def 定位 case color
原文地址：https://www.cnblogs.com/shenpeng/p/13031774.html
