成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

iView3.x Anchor(錨點(diǎn))組件 導(dǎo)航錨點(diǎn)

wuaiqiu / 1596人閱讀

摘要：錨點(diǎn)組件導(dǎo)航錨點(diǎn)框架中新添了一個(gè)錨點(diǎn)組件，用這個(gè)組件去做頁面的分類導(dǎo)航正好合適，但是苦于官方文檔太過抽象研究了一整天，才勉強(qiáng)可以在項(xiàng)目中應(yīng)用。

iView3.x Anchor(錨點(diǎn))組件 導(dǎo)航錨點(diǎn)

iview 3.x框架中新添了一個(gè)Anchor（錨點(diǎn)組件），用這個(gè)組件去做頁面的分類導(dǎo)航正好合適，但是苦于官方文檔太過抽象研究了一整天，才勉強(qiáng)可以在項(xiàng)目中應(yīng)用。下面是我研究后的一點(diǎn)總結(jié)：

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

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

接著在要使用錨點(diǎn)的頁面中引入組件

注意：在頁面中這里引用的是AnchorLink
原因是在頁面中Anchor 被渲染成了多層嵌套的div 只有AnchorLink是以組件形式存在于渲染后的頁面中所以真正的組件是AnchorLink
但是main.js文件中引入還是要引入Anchor...

就這一點(diǎn)小坑硬是把我卡住了好久，最后在層層的Elements中終于發(fā)現(xiàn)了問題的所在。

import {AnchorLink} from "iview"

components: {
    AnchorLink
 }

html中錨點(diǎn)列表部分的代碼

Anchor標(biāo)簽中container屬性表示的是可以滾動(dòng)的區(qū)域節(jié)點(diǎn),表示方法與CSS相同"."表示class,"#"表示id
affix屬性是圖釘效果,根據(jù)自己想表現(xiàn)的效果選擇是否使用;show-ink是錨點(diǎn)前的小圓點(diǎn)都是按需選擇的屬性.

代碼中href的值是該錨點(diǎn)跳轉(zhuǎn)位置的ID title是該錨點(diǎn)的名稱

錨點(diǎn)對(duì)應(yīng)的滾動(dòng)區(qū)代碼

滾動(dòng)區(qū)中div的id對(duì)應(yīng)的是錨點(diǎn)部分的href


  
12312312312

  
123123123123

CSS代碼部分

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

注意：必須要把滾動(dòng)區(qū)設(shè)計(jì)成帶滾動(dòng)條的部分不然完成不了滾動(dòng)效果。
也就是說無論滾動(dòng)區(qū)和錨點(diǎn)列表在html中的順序是如何，但是一定要把Anchor標(biāo)簽中container對(duì)應(yīng)的文檔節(jié)點(diǎn)，設(shè)置為滾動(dòng)區(qū)的節(jié)點(diǎn)。
例如：

  // 滾動(dòng)區(qū)域

   // 錨點(diǎn)列表
   
   
  

  
12312312312
 // 錨點(diǎn)列表中對(duì)應(yīng)的文檔位置
  
123123123123

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

最后，紀(jì)念一下這忙碌的一天。。

END

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98336.html

相關(guān)文章

  • 怎樣給一個(gè)Vue頁面添加大綱導(dǎo)航

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

    susheng 評(píng)論0 收藏0

  • 頁面快速定位到指定位置的幾個(gè)方法

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

    AlanKeene 評(píng)論0 收藏0

  • cocos creator 簡(jiǎn)單實(shí)戰(zhàn)

    摘要：錨點(diǎn)位置確定后，所有子節(jié)點(diǎn)就會(huì)以父節(jié)點(diǎn)錨點(diǎn)所在位置作為坐標(biāo)系原點(diǎn)。觀察實(shí)際效果以下為實(shí)際效果，左側(cè)打開欄目為不同手機(jī)分辨率模式。巨坑因?yàn)榉直媛拾l(fā)生變化，導(dǎo)致節(jié)點(diǎn)大小位置都會(huì)發(fā)生變化。 項(xiàng)目地址：https://github.com/Iroha1024/... 一個(gè)小游戲的demo，以下簡(jiǎn)單地介紹了我關(guān)于cocos creator的一點(diǎn)理解和開發(fā)流程 版本：cocos creator v...

    taowen 評(píng)論0 收藏0

  • Markdown-Navbar —— 可能是最好用的markdown文章導(dǎo)航組件

    摘要：這可能是最實(shí)用的文章結(jié)構(gòu)樹組件，使用此組件，你可以為讀者顯示文章目錄點(diǎn)擊目錄跳轉(zhuǎn)到文章對(duì)應(yīng)內(nèi)容分享帶錨點(diǎn)值的給讀者 這可能是最實(shí)用的markdown文章結(jié)構(gòu)樹組件，使用此組件，你可以： 為讀者顯示文章目錄 點(diǎn)擊目錄跳轉(zhuǎn)到文章對(duì)應(yīng)內(nèi)容 分享帶錨點(diǎn)hash值的url給讀者 Best markdown navigation bar for React. git repo Install ...

    yexiaobai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<