<div class="tablist">
<a :class="{active : activeBtn === 0}" @click="goAnchor('#anchor-0',0)"><span>*</span> 基础信息</a>
<a :class="{active : activeBtn === 1}" @click="goAnchor('#anchor-1',1)"><span>*</span> 补助范围</a>
<a :class="{active : activeBtn === 2}" @click="goAnchor('#anchor-2',2)"><span>*</span> 计算公式</a>
</div>
<div id="tabcon" style="display:inline-block;width:760px;">
<div class="el-dialog-div">
<el-scrollbar ref="scrollbar" wrap-class="scrollbar-wrapper">
<el-form
ref="addForm"
:model="formInline"
inline
:rules="rules"
:disabled="pageType==='detail'"
>
<div id="anchor-0">... </div>
<div id="anchor-1">... </div>
<div id="anchor-2">... </div>
方法：
// 锚点跳转
goAnchor(selector, index) {
this.activeBtn = index
this.$el.querySelector(selector).scrollIntoView()
},
/**
* 滑轮滚动事件 返回滑轮距顶部的距离 author-1距离顶422 author-2:722
* */
handleScroll(e) {
const scrollbarEl = this.$refs.scrollbar.wrap
scrollbarEl.onscroll = (e) => {
if (scrollbarEl.scrollTop < 300) {
this.activeBtn = 0
} else if (scrollbarEl.scrollTop > 300 && scrollbarEl.scrollTop < 422) {
this.activeBtn = 1
} else if (scrollbarEl.scrollTop > 422) {
this.activeBtn = 2
}
}
},
第二种写法
setActive(selector, val) {
this.$nextTick(() => {
this.isActive = val
this.$refs.content.scrollTop = this.$el.querySelector(selector).offsetTop
})
},
orderScroll() {
this.$nextTick(() => {
if (this.isApply === true) {
if ((this.$refs.content.scrollTop + 30) > this.$el.querySelector('#anchor6').offsetTop) {
this.isActive = 6
}
}
if (this.select11 === true) {
if ((this.$refs.content.scrollTop + 30) > this.$el.querySelector('#anchor1').offsetTop) {
this.isActive = 1
}
}
if (this.select12 === true) {
if ((this.$refs.content.scrollTop + 30) > this.$el.querySelector('#anchor2').offsetTop) {
this.isActive = 2
}
}
if ((this.$refs.content.scrollTop + 30) > this.$el.querySelector('#anchor0').offsetTop) {
this.isActive = 0
}
})
}
<div class="convenient-box">
<ul>
<li
v-if="isApply"
:class="{active : isActive === 6}"
@click="setActive('#anchor6',6)"
>申请信息</li>
<li
v-if="select11"
:class="{active : isActive === 1}"
@click="setActive('#anchor1',1)"
>采购意向书</li>
<li
v-if="select12"
:class="{active : isActive === 2}"
@click="setActive('#anchor2',2)"
>招标公告</li>
<li
:class="{active : isActive === 0}"
@click="setActive('#anchor0',0)"
>基础信息</li>
</ul>
<!-- <div class="djmb" /> -->
</div>
<div ref="content" class="content-box" @scroll="orderScroll">
<div v-show="isApply" id="anchor6">
<div class="item-header-box">
<svg-icon class="svg-icon-btn" icon-class="dividers" />
申请信息
<div class="item-line" />
</div>
<div class="item-box">
<iframe id="iframe-content" class="iframe-content" :src="iframeUrl" />
</div>
</div>
<MainForm
v-show="select11"
id="anchor1"
/>
<MainForm
v-show="select12"
id="anchor2"
/>
<MainForm
id="anchor0"
ref="mainForm"
/>