ivx編輯器教程使用ivx實現標籤導航的經驗總結

  • A+
所屬分類:ivx圖文教程

標籤導航可以把同類內容進行歸併而且區分開不同分塊,充分利用有限的空間,實現更條理化、更簡潔的網頁布局,常用於新聞頁、電商產品展示等需要進行分類展示場景。今天就說一下如何實現這種效果。
ivx編輯器教程使用ivx實現標籤導航的經驗總結
1.首先我們將整個頁面分成兩個部分,上面的行用於顯示標籤,下面的行用於顯示每個標籤頁的具體內容。
ivx編輯器教程使用ivx實現標籤導航的經驗總結
2.然後我們在標籤行內循環創建標籤,數據來源是我們已經填好的一個一位數組。for容器下的文本組件的內容直接綁定當前數據1即可,而背景顏色和文字顏色的數據綁定使用了三元表達式,目的是使選中的文本組件能夠區分顯示。
ivx編輯器教程使用ivx實現標籤導航的經驗總結
3.接下來是給for容器下的文本組件添加事件,每當我們點擊文本組件,即選中該標籤時,將該標籤的序號值賦給數值變量“選中序號”。
ivx編輯器教程使用ivx實現標籤導航的經驗總結
4.最後就是設計內容行,因為一位數組“數據標籤來源”中有五個元素,所以也就設計五個展示部分來與標籤一一對應,將它們分別放進五個if容器中,判斷條件就是該展示部分對應的標籤名稱在一位數組中的序號與數值變量“選中序號”相等,這樣任意時刻只有一個if容器的條件是滿足的,也就只有一個if容器內的展示部分是可見的。
ivx編輯器教程使用ivx實現標籤導航的經驗總結
5.拓展組件——標籤頁容器
ivx中其實也有一個拓展組件可以用於實現此類效果,即標籤頁容器。
ivx編輯器教程使用ivx實現標籤導航的經驗總結
標籤頁容器作為所有標籤頁組件的父容器,可以對標籤的樣式,位置和字體等屬性進行設置。每個標籤頁相當於一個小型頁面,我們可以自由添加各種布局組件。
ivx編輯器教程使用ivx實現標籤導航的經驗總結
ivx編輯器教程使用ivx實現標籤導航的經驗總結
總結
自定義實現導航標籤功能最主要的就是建立標籤部分與展示部分的聯繫,即選擇標籤後展示部分能切換到正確的展示內容。自定義的做法有很多可以改動的部分,比如demo中我們不添加那麼多if容器,可以直接對五個展示部分,即五個絕對定位容器的可見屬性進行數據綁定,這樣最終的效果也是相同的。
ivx編輯器教程使用ivx實現標籤導航的經驗總結

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: