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

來源：https://segmentfault.com/a/1190000016667659

iView3.x Anchor(錨點)組件 導航錨點