国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wuaiqiu / 1558人閱讀

摘要：錨點組件導航錨點框架中新添了一個錨點組件，用這個組件去做頁面的分類導航正好合適，但是苦于官方文檔太過抽象研究了一整天，才勉強可以在項目中應用。

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是錨點前的小圓點都是按需選擇的屬性.

代碼中href的值是該錨點跳轉位置的ID title是該錨點的名稱

錨點對應的滾動區代碼

滾動區中div的id對應的是錨點部分的href


  
12312312312

  
123123123123

CSS代碼部分

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

注意：必須要把滾動區設計成帶滾動條的部分不然完成不了滾動效果。
也就是說無論滾動區和錨點列表在html中的順序是如何，但是一定要把Anchor標簽中container對應的文檔節點，設置為滾動區的節點。
例如：

  // 滾動區域

   // 錨點列表
   
   
  

  
12312312312
 // 錨點列表中對應的文檔位置
  
123123123123

補充說明: 如果頁面中的數據是通過v-for循環渲染的,則有可能出現"offset undefined一類的報錯",出現這種報錯的大概率會影響頁面的滾動效果,產生的原因是:錨點列表的數據與滾動的頁面的展示數據是分開獲取的,由于時間差的原因會導致其中一個渲染完成之后另一部分并沒有被渲染.也就會造成組件在獲取offset時找不到(也就是undefined),報錯并導致失去原有的頁面效果.
解決辦法:設法使兩部分數據同一時間賦值給渲染的變量,比如分兩個接口獲取錨點的分類和內容,在create中調用接口獲取數據,但不要再兩個接口中分別賦值.統一到一個接口數據獲取完成后再賦值,這樣就可以避免這種報錯.

最后，紀念一下這忙碌的一天。。

END

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98336.html

相關文章

  • 怎樣給一個Vue頁面添加大綱導航

    摘要：這里用到一個非常重要的函數，它會根據調用的根節點遍歷該節點的子樹，返回符合某個選擇器的一個類數組的對象，但不是數組，而且遍歷方式就是上文所述的深度優先先序遍歷真是激動人心接下來我們可以用這個元素獲取所有需要導航的元素列表。 一、前言 前兩天項目遇到一個需要給頁面添加大綱導航的功能，要求把頁面中的特定標簽加入到大綱導航中。類似這樣： showImg(https://segmentfaul...

    susheng 評論0 收藏0

  • 頁面快速定位到指定位置的幾個方法

    摘要：但是就頁面定位到指定位置其實還有更好的辦法，就是使用去獲取指定位置的，這樣的話還可以加滑動動畫，使定位的這個過程比較平滑。 需求 頁面上有一排按鈕，懸浮在窗口頂端，不隨頁面滑動而滑動，這一組按鈕分別對應的是頁面的各個部分，點擊按鈕，頁面定位到對應的位置。 需求分析 拿到這個需求，很自然的想到，解決這個最簡單的方法是使用錨點（能靠HTML和css解決的，盡量不使用js 解法 想到使用錨點...

    AlanKeene 評論0 收藏0

  • cocos creator 簡單實戰

    摘要：錨點位置確定后，所有子節點就會以父節點錨點所在位置作為坐標系原點。觀察實際效果以下為實際效果，左側打開欄目為不同手機分辨率模式。巨坑因為分辨率發生變化，導致節點大小位置都會發生變化。 項目地址：https://github.com/Iroha1024/... 一個小游戲的demo，以下簡單地介紹了我關于cocos creator的一點理解和開發流程 版本：cocos creator v...

    taowen 評論0 收藏0

  • Markdown-Navbar —— 可能是最好用的markdown文章導航組件

    摘要：這可能是最實用的文章結構樹組件，使用此組件，你可以為讀者顯示文章目錄點擊目錄跳轉到文章對應內容分享帶錨點值的給讀者 這可能是最實用的markdown文章結構樹組件，使用此組件，你可以： 為讀者顯示文章目錄 點擊目錄跳轉到文章對應內容 分享帶錨點hash值的url給讀者 Best markdown navigation bar for React. git repo Install ...

    yexiaobai 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<