hbuilder?

列表,是HTML開發的常見功能。對於HTML5 APP開發而言,列表的重要性,就更加突出了。那麼,列表在HTML5 APP開發中的形狀有多少種呢。以及列表在APP下,又是如何實現分頁處理的呢。

下面將逐一介紹(想了解hbuilder app開發Input功能,hbuilder app開發

Button,見其它經驗)。

0 HTML5 APP開發之Button按鈕

0 HTML5 APP開發之Input輸入框

工具/原料

HBuilder6.6

MUI2.5

方法/步驟

純列表顯示,則列表裡每一行都只有文字。這裡將介紹兩種用法:1、單行文字;2、多行文字。注意,錄文字過長時,應該新增類似class="mui-ellipsis-2"的樣式。mui-ellipsis-2 表示超過兩行,將以省略號表示。那麼,有沒有超過一或三行,將以省略號表示的樣式呢,答案是肯定的。

程式碼如下:

  • 純文字單行效果
  • 純文字多行效果,超過兩行,將用省略號表示;純文字多行效果,超過兩行,將用省略號表示

0 HTML5 APP開發之使用者登入

hbuilder app開發之列表

hbuilder app開發之列表

帶箭頭和數字列表顯示。這種樣式,通過用於帶有彙總或統計的場景。

程式碼如下:

hbuilder app開發之列表

帶input類控制元件列表顯示。這種樣式,一般用於選擇項的場景。

程式碼如下:

  • 帶input類控制元件的效果

hbuilder app開發之列表

帶圖片列表顯示。這種樣式,應該說是最常見的作法。主要用於資訊展示類場景。

程式碼如下:

hbuilder app開發之列表

無論哪些效果的列表,都避免不了分頁檢視的需求。對於手機端,通用都是使用下拉重新整理方式實現。

第一種下拉重新整理方式比較簡單:一次性獲取全部的資料,再進行假重新整理。(效能會受影響)

第二種下拉重新整理方式較為複雜:動態獲取一頁的資料,再進行重新整理。(工作量會過一些)

需要實現pullRefresh事件,將在其它經驗裡詳細介紹操作。

注意事項

下拉方式重新整理,注意是在原來的資料基礎上,插入新的內容。

相關問題答案