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