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

iview 3.x框架中新添了一個Anchor（錨點元件），用這個元件去做頁面的分類導航正好合適，但是苦於官方文件太過抽象研究了一整天，才勉強可以在專案中應用。下面是我研究後的一點總結：

首先在main.js中引入iview 3.x
我使用部分引用元件的方法所以要單獨引入Anchor元件

import {Anchor} from 'iview'
 
Vue.component('Anchor', Anchor) // 這兩句就可以在頁面中使用元件了

接著在要使用錨點的頁面中引入元件

注意：在頁面中這裡引用的是AnchorLink

就這一點小坑硬是把我卡住了好久，最後在層層的Elements中終於發現了問題的所在。

import {AnchorLink} from 'iview'

components: {
    AnchorLink
 } 

html中錨點列表部分的程式碼

Anchor標籤中container屬性表示的是可以滾動的區域節點,表示方法與CSS相同"."表示class,"#"表示id

<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