动态数据锚点定位

锚点定位

左侧点击右侧锚点定位样式一

   <div class="left">
          <a href="#book_time" @click="changeTabs(1)"></a>
          <a href="#search" @click="changeTabs(1)"></a>
          <a href="#search_flow" @click="changeTabs(1)"></a>
        </div>
        <!-- 内容部分 -->
        <div class="right">
          <div id="book_time">
            <!-- content -->
          </div>
          <div id="search">
              <!-- content -->
          </div>
          <div id="search_flow">
              <!-- content -->
          </div>
        </div>

vue锚点定位二

适用于动态获取的标题和内容

collapseTransition是引用的外部js

            <!-- 二级导航跳转导相对应名称的地方 -->
<!-- 左侧 -->
 <div v-for="(item, index) in units" :key="item.code">

  <div class="titleDate">
<!-- 一级导航名称 -->
            <div @click="clickItem(item, index,item.setindex-1)" class="fontdata">
              <span :class="num === index ? 'active' : ''" class="font">{{item.name}}</span>
            </div>
              </div>
            <transition-group v-show="!isShow[index]">
            <div class="api-item" v-for="(i, order) in item.apiInfoDto" :key="i.id" >
              <div>
                <vi-tooltip>
                  <template slot='title'>
                   <span>{{i.name}}</span>
                  </template>
<!-- 二级导航名称 -->
                  <span :class="num === order ? 'active' : ''" class="ellipsis" @click="groupDate(index,order,i.indexScroll)">{{i.name}}</span>
                </vi-tooltip>

              </div>
            </div>
            </transition-group>
          </div>
        </div>


<!-- 右侧 -->
<div v-for="(it, indexs)  in details" :key="`wrap_${indexs}`" class="setTitle">
<!-- 对应的一级导航名称{{it.name}} -->
              <div class="unit-name">{{it.name}}</div>
              <div v-for="(item,index) in it.child" :key="`wrap_${index}`" class="section">
              <div class="title" >
                <span>{{index+1}}</span>
<!-- 对应的二级导航名称{{item.name}} -->
                <strong ref="titleName" :id="'strong'+index">{{item.name}}</strong>
              </div>
              <collapseTransition v-if="item.info && item.info.length > 0">
                <div v-show="item.expand" class="content" style="padding-top: 12px; position: relative;">
                    <div v-for="(data, key) in item.info" :key="`sub_${key}`">
                      <div v-if="item.info.length > 1" class="subTitle" >{{`${item.name}${key+1}`}}</div>
                      <vi-row type="flex" style="padding: 0 24px;">
                        <template v-for="(res, n) in data">
                          <div v-if="res && res.data !== null" :key="`item_${n}`" style="width: 33.3%; float: right">
                            <div v-if="res.name ==='身份证图片'" style="position: absolute;display: flex; flex-direction: row ;top: 20px; right: 10px;">
                              <img :src="res.data" style="width: 120px"/>
                            </div>
                            <div v-else style="display: flex; flex-direction: row; padding: 0 16px 12px 16px;">
                              <label style="color: #333333">{{res.name}}：</label>
                              <div style="color: #333333">{{res.data}}</div>
                            </div>
                          </div>
                        </template>
                      </vi-row>
                    </div>
                </div>
              </collapseTransition>
            </div>
            </div>

方法内容：

data(){
return {
num: 0,
isShow: [],
units: [ {
“name” : “一级标题1”,
“child” : [ {
“name” : “二级标题1”,
“info” : [ [ {
“data” : “张三”,
“name” : “张三1”,
“order” : 1
}, {
“data” : “./images/1.png”,
“name” : “图片”,
“order” : 999
} ] ],
“status” : 2
}, {
“name” : “二级标题3”,
“info” : [ [{
“data” : “张三”,
“name” : “张三1”,
“order” : 1
} ] ],
“status” : 2
} ]
}, {
“name” : “一级标题2”,
“child” : [ {
“name” : “二级标题1”,
“info” : [ [ {
“data” : “张三”,
“name” : “张三1”,
“order” : 1
}, {
“data” : “李四”,
“name” : “李四2”,
“order” : 2
}, {
“data” : “和”,
“name” : “何址”,
“order” : 999
} ] ],
“status” : 2
} ]
} ],
details:
[ {
“name” : “一级标题1”,
“child” : [ {
“name” : “二级标题1”,
“info” : [ [ {
“data” : “张三”,
“name” : “姓名”,
“order” : 1
}]],
}],
},{
“name” : “一级标题2”,
“child” : [ {
“name” : “二级标题1”,
“info” : [ [ {
“data” : “张三”,
“name” : “姓名”,
“order” : 1
}]],
}],
}]

}，
//collapseTransition使用
components: {
    collapseTransition
  },
mothods:{
clickItem(item, index,setindex) { //一级标题
console.log(item,index,setindex)
if(setindex==-1){
this.returnTop()
}else{
let jump = document.getElementsByClassName(‘setTitle’);
// 获取需要滚动的距离
let total = jump[setindex].offsetTop - 70;
// Chrome
document.body.scrollTop = total;
// Firefox
document.documentElement.scrollTop = total;
// Safari
window.pageYOffset = total;
},
loadSrollTitle: function () { //大类滚动scrollTop
var self = this;
var $navs = $(".nav1");
var setTitles = document.getElementsByClassName(‘setTitle’);
for (var i = setTitles.length - 1; i >= 0; i–) {
if (self.scroll >= setTitles[i].offsetTop - 100) {
$navs.eq(i).addClass(“current”).siblings().removeClass(“current”)
break;
}
}
},
groupDate(index,order,indexScroll){ //点击二级目录
let jump = document.getElementsByClassName(‘section’);
// 获取需要滚动的距离
let total = jump[indexScroll].offsetTop - 80;
// Chrome
document.body.scrollTop = total;
// Firefox
document.documentElement.scrollTop = total;
// Safari
window.pageYOffset = total;
},
loadSroll: function () {//二级导航scrollTop
var self = this;
var $navs = $(".nav1");
var sections = document.getElementsByClassName(‘section’);
for (var i = sections.length - 1; i >= 0; i–) {
if (self.scroll >= sections[i].offsetTop - 100) {
$navs.eq(i).addClass(“current”).siblings().removeClass(“current”)
break;
}
}
},
},
mounted(){
window.addEventListener(‘scroll’, this.dataScroll);
}，
watch: {
scroll: function () {
this.loadSroll()
this.loadSrollTitle()
}
},
}