iView3.x Anchor(锚点)组件导航锚点 - 个人文章 - SegmentFault 思否

安宇雨 - 随手采集
2018-11-20 19:59:31
随手采集
0000-未整理-等待研究


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

Original url: Access
Created at: 2018-11-20 19:59:30
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到