一個(gè)App完成入門(mén)篇（六）- 完成通訊錄頁(yè)面

cheukyin 發(fā)布于2019-08-19 18:12 / 875人閱讀

摘要：我們定義一個(gè)類的數(shù)據(jù)源組件，并向其中添加本地通訊錄中讀取出來(lái)的數(shù)據(jù)，因?yàn)楸容^特殊，數(shù)據(jù)源中每項(xiàng)的第一個(gè)元素為索引組的數(shù)據(jù)，點(diǎn)擊該條數(shù)據(jù)無(wú)法觸發(fā)和事件。自定義模塊這里想要導(dǎo)入自定義的庫(kù)，獲取通訊錄的聯(lián)系人的首字母拼音。

第五章和第六章間隔時(shí)間有點(diǎn)長(zhǎng)，對(duì)不起大家了。下面繼續(xù)。

本節(jié)教程將要教會(huì)大家如何加載本地通訊錄。

導(dǎo)入項(xiàng)目
導(dǎo)入通訊錄
自定義js模塊
發(fā)送和訂閱page消息
將要學(xué)習(xí)的demo效果圖如下所示

導(dǎo)入完整項(xiàng)目

本節(jié)示例demo請(qǐng)參考下載地址，可以導(dǎo)入到設(shè)計(jì)器中學(xué)習(xí)。

這節(jié)教程中將要用到的組件有do_Contect、do_IndexListView，請(qǐng)大家前幾節(jié)教程所教授的方法，提前添加這兩個(gè)組件，并打成相應(yīng)調(diào)試包用于調(diào)試。

導(dǎo)入通訊錄
DeviceOne開(kāi)發(fā)的do_Contact組件是針對(duì)手機(jī)本地通訊錄的增刪查改提供相應(yīng)功能的一個(gè)組件，而do_IndexListView是一個(gè)右邊帶索引的ListView組件，通過(guò)索引能快速定位到該索引下首條數(shù)據(jù)，常被用于類似通訊錄和歌曲列表等功能中。

所以想要在App中模擬手機(jī)通訊錄功能，只需簡(jiǎn)單地將本地通訊錄里的數(shù)據(jù)讀取出來(lái)并將這些數(shù)據(jù)綁定給IndexListView中展示即可。

先給do_IndexListView定義一個(gè)模板頁(yè)addressCell.ui，在addressCell.ui.js中定義好數(shù)據(jù)映射，再將do_IndexListView的template屬性指向addressCell.ui的地址，這樣ViewModel就定義好了。

接下來(lái)再準(zhǔn)備數(shù)據(jù)module。我們定義一個(gè)MM類的數(shù)據(jù)源組件do_HashData，并向其中添加本地通訊錄中讀取出來(lái)的數(shù)據(jù)，因?yàn)閐o_IndexListView比較特殊，數(shù)據(jù)源中每項(xiàng)value的第一個(gè)元素為索引組的數(shù)據(jù)，點(diǎn)擊該條數(shù)據(jù)無(wú)法觸發(fā)touch和longTouch事件。

自定義js模塊
這里想要導(dǎo)入自定義的js庫(kù)，獲取通訊錄的聯(lián)系人的首字母拼音。