使用UGUI做下拉列表的方案

2022-03-14 03:22:32 字數 831 閱讀 9052

前一段做乙個npc瀏覽器,需要做乙個類似於動態查詢的東西,在文字框裡輸入關鍵字,然後檢索資料,將符合要求的資料以列表的方式顯示在文字框下面的下拉列表裡。

效果差不多就是這樣吧。

雖然和實際上的下拉列表不太像,但是原理方案都是相同的。無非是將文字框變成button。

ok,下拉列表,就是button集合+scrollrect.

我不會手把手教你怎麼拖元件,我只能告訴你,選定父節點,新增scrollrect,然後建立子節點,將子節點作為容器賦值給content。當然還需要新增mask元件,

來遮擋過長的列表

接下來就是button的動態生成。需要注意的是,我們要想達到按鈕的排版整齊,需要設計布局為top模式。這樣通過計算每個button的大小,

確定button的位置。

接下來就是一些簡單的事件處理。每個button元件新增乙個事件處理,用來獲取使用者選擇的id,自行做一些selectindex,selectitem,add,remove,等等

常用的介面。下拉框做為「特殊處理」,用來顯示使用者選擇的項,同時隱藏button集合。點選時,再顯示button集合即可。

關於下拉列表的介面**,大家可以自己嘗試做下,無非是增刪改查,具體的效率看個人水平了,我這裡就不提供了

使用DIV做下拉列表

最開始製作下拉列表,我們使用的是表單元素裡面的乙個標籤,並且裡面加上,來實現下拉列表,不過這種下拉列表的樣式是固定的,如果我們想把下拉列表做的更加好看一些,可以使用div製作下拉列表。以上是使用div製作的下拉列表的只能出現請選擇的乙個div製做的類似於文字框,並不能實現下拉選擇的效果 這時候就要使...

用CSS做的下拉列表

檔案 f 新建 n 開啟 o ctrl o 使用 記事本 編輯 d 儲存 s ctrl s 另存為 a 頁面設定 u 列印 p ctrl p 列印預覽 v 傳送 e 匯入和匯出 i 屬性 r 關閉 c 編輯 e 剪下ctrl x 複製ctrl c 貼上ctrl v 全選 a ctrl a 查詢 在當...

rails中的select下拉列表使用

最近在rails開發中有用到下拉列表的元素,用來描述和區分使用者的型別.型別包括 學生,值為stu,教師,值為tea,該資訊儲存在user type中,user types 學生 stu 教師 tea freeze view層 為 型別 options 請選擇型別 student user type...