iView3.x Anchor(锚点)组件 导航锚点

iView3.x Anchor(锚点)组件 导航锚点

---

iview 3.x框架中新添了一个Anchor（锚点组件），用这个组件去作页面的分类导航正好合适，可是苦于官方文档太过抽象研究了一成天，才勉强能够在项目中应用。下面是我研究后的一点总结：

---

首先在main.js中引入iview 3.x
我使用部分引用组件的方法因此要单独引入Anchor组件

import {Anchor} from 'iview'
 
Vue.component('Anchor', Anchor) // 这两句就能够在页面中使用组件了

接着在要使用锚点的页面中引入组件

注意：在页面中这里引用的是AnchorLink
缘由是在页面中Anchor 被渲染成了多层嵌套的div 只有AnchorLink是以组件形式存在于渲染后的页面中因此真正的组件是AnchorLink
可是main.js文件中引入仍是要引入Anchor...

就这一点小坑硬是把我卡住了很久，最后在层层的Elements中终于发现了问题的所在。

import {AnchorLink} from 'iview'

components: {
    AnchorLink
 }

html中锚点列表部分的代码

Anchor标签中container属性表示的是能够滚动的区域节点,表示方法与CSS相同"."表示class,"#"表示id
affix属性是图钉效果,根据本身想表现的效果选择是否使用;show-ink是锚点前的小圆点都是按需选择的属性.

<Anchor show-ink :affix="false" container=".goodShow"> 
  <AnchorLink href="#basic_usage" title="Basic Usage" />
  <AnchorLink href="#static_position" title="Static Position" />
</Anchor>

代码中href的值是该锚点跳转位置的ID title是该锚点的名称

锚点对应的滚动区代码

滚动区中div的id对应的是锚点部分的href

<div class="goodShow">
  <div id="basic_usage" style="height:30rem;">12312312312</div>
  <div id="static_position" style="height:30rem;">123123123123</div>
</div>

CSS代码部分

.goodShow{position: relative;overflow-y: scroll;}

注意：必需要把滚动区设计成带滚动条的部分否则完成不了滚动效果。
也就是说不管滚动区和锚点列表在html中的顺序是如何，可是必定要把Anchor标签中container对应的文档节点，设置为滚动区的节点。
例如：

<div class="goodShow">  // 滚动区域

  <Anchor show-ink :affix="false" container=".goodShow"> // 锚点列表
   <AnchorLink href="#basic_usage" title="Basic Usage" />
   <AnchorLink href="#static_position" title="Static Position" />
  </Anchor>

  <div id="basic_usage" style="height:30rem;">12312312312</div> // 锚点列表中对应的文档位置
  <div id="static_position" style="height:30rem;">123123123123</div>

</div>

---

补充说明: 若是页面中的数据是经过v-for循环渲染的,则有可能出现'offset undefined一类的报错',出现这种报错的大几率会影响页面的滚动效果,产生的缘由是:锚点列表的数据与滚动的页面的展现数据是分开获取的,因为时间差的缘由会致使其中一个渲染完成以后另外一部分并无被渲染.也就会形成组件在获取offset时找不到(也就是undefined),报错并致使失去原有的页面效果.
解决办法:设法使两部分数据同一时间赋值给渲染的变量,好比分两个接口获取锚点的分类和内容,在create中调用接口获取数据,但不要再两个接口中分别赋值.统一到一个接口数据获取完成后再赋值,这样就能够避免这种报错.

---

最后，记念一下这忙碌的一天。。

---

END