ant mobile TabBar 元件新增路由

2021-10-09 03:32:48 字數 740 閱讀 4845

感覺 ant-mobile 和 vant 相比要很不方便,很多功能需要我們自己去實現,團隊的重心應該都在 ant-design 上,比如 tabbar 並沒有設定路由功能,本文闡述了如何在乙個使用了 react-router 的 react 專案中合理的使用 antd-mobile tabbar 功能。

為了使元件結構更加清晰,首先要在 tabbar 元件外包一層父元件來讀取路由資訊,我們可以通過 this.props.location.pathname 拿到當前的 pathname,我專案中的 pathname 的結構為 /index/mine,取到 mine 即為當前頁面:

let currpage = this.props.location.pathname.split('/')[2];
將 currpage 傳遞給子元件:

在 tabbar 元件中使用 shouldcomponentupdate 生命週期鉤子來判斷是否需要更改 selectedtab,如果 props.currpage 與 state.selectedtab 一致即更改當前 tab,如果一致則忽略。

shouldcomponentupdate(props, state) )

}return true;

}

新增元件 父子元件的通訊

原創 牛津小馬哥web前端工程師陳小妹妹。在前端vue框架中,我們常常使用多個頁面組成乙個元件來建立專案。每個元件都有其自己的功能,基於元件的體系結構使開發和維護應用程式變得容易。在開發過程中,您可能會遇到需要與其他元件共享資料的情況。在本文中,我們將學習實現元件之間通訊的常用方法。vue.js允許...

Flex元件元件新增自定義事件

自定義元件如下 com.cp2 在這裡定義事件 event name sharedata type flash.events.textevent event name clickme type flash.events.event 主檔案 xmlns s library xmlns mx libra...

java JFrame中新增元件

雖然jframe 物件中有 add 方法,但是卻不能直接用於 新增 awt 元件或者 swing 元件,否則會丟擲異常。因為jframe 不是乙個容器,它只是乙個框架。向jframe 新增元件的方式如下 方式一 用getcontentpane 方法獲得jframe的內容面板,再對其加入元件 fram...