小編最近在做一個(gè)任務(wù)：要求實(shí)現(xiàn)一個(gè)在微信公眾號(hào)里面的H5列表頁(yè)面。拿到這個(gè)任務(wù)我們首先要進(jìn)行需求分析，由于是在微信公眾號(hào)也就是手機(jī)里面的H5列表，所以就不可能像PC上的列表頁(yè)面那樣進(jìn)行分頁(yè)處理，應(yīng)該按照手機(jī)列表常用的上拉刷新，下拉重新加載的方式實(shí)現(xiàn)。所以這個(gè)任務(wù)主要實(shí)現(xiàn)以下兩點(diǎn)：
1、列表頁(yè)面需實(shí)現(xiàn)上拉刷新，下拉重新加載；
2、動(dòng)態(tài)加載列表數(shù)據(jù)；
技術(shù)選型
確定后需求后就要選擇合適的技術(shù)框架和開(kāi)發(fā)工具進(jìn)行開(kāi)發(fā)，由于小編在做這個(gè)任務(wù)之前也沒(méi)有手機(jī)H5開(kāi)發(fā)的項(xiàng)目經(jīng)驗(yàn)，只在平時(shí)閱讀技術(shù)文章時(shí)有一些了解，所以當(dāng)時(shí)想出了以下幾種選擇：
1、Eclipse工具+Juqery Mobile UI框架；
2、Eclipse工具+Juqery框架+iScroll框架；
3、HBuilder工具+MUI框架；
4、WeX5工具及其自帶的UI框架。
通過(guò)深入的比較以上四種組合，小編發(fā)現(xiàn)HBuilder工具+MUI框架這個(gè)組合有明顯的優(yōu)勢(shì)，主要表現(xiàn)在以下幾個(gè)方面：
1、HBuilder工具簡(jiǎn)單、易用，尤其是強(qiáng)大的聯(lián)想功能可以極大的簡(jiǎn)化開(kāi)發(fā)；如下圖所示：
2、可以擴(kuò)展豐富的插件，比如內(nèi)置瀏覽器插件，可以實(shí)現(xiàn)刷新頁(yè)面；如下圖所示：
3、MUI框架具備豐富的示例及技術(shù)文檔，初學(xué)者也可以快速上手；如下圖所示：
4、MUI框架項(xiàng)目只需要引入mui.min.js、mui.min.css即可，是一個(gè)輕量級(jí)的框架。如下圖所示：
基于以上優(yōu)勢(shì)，小編選擇HBuilder工具+MUI框架來(lái)完成H5列表頁(yè)面的開(kāi)發(fā)，下面小編將會(huì)為大家介紹如何快速實(shí)現(xiàn)這個(gè)H5列表頁(yè)面。
實(shí)現(xiàn)上拉刷新/下拉重新加載的頁(yè)面效果
1、下載開(kāi)發(fā)工具
大家可以首先到官網(wǎng)（www.dcloud.io）下載HBuilder工具，由于HBuilder工具是基于Eclipse擴(kuò)展而來(lái)，所以下載完成后直接解壓縮就可以實(shí)現(xiàn)，雙擊解壓縮后的執(zhí)行文件“HBuilderX.exe”即可打開(kāi)HBuilder工具，如下圖所示：
2、創(chuàng)建項(xiàng)目
新建項(xiàng)目，選中“5+App”后在下拉框中選擇mui項(xiàng)目，如下圖所示：
輸入項(xiàng)目名稱后點(diǎn)擊創(chuàng)建按鈕即可創(chuàng)建項(xiàng)目，項(xiàng)目目錄結(jié)構(gòu)如下圖所示：
初始index.html頁(yè)面代碼如下圖所示（右側(cè)瀏覽器頁(yè)簽是展示效果圖）：
3、拷貝示例頁(yè)面的代碼
找到上拉刷新，下拉重新加載的示例頁(yè)面（pullrefresh.html），如下圖所示：
拷貝相關(guān)的代碼（<body></body>標(biāo)簽中的內(nèi)容）到我們的項(xiàng)目頁(yè)面中,拷貝完成后的效果圖如下：
動(dòng)態(tài)加載數(shù)據(jù)
1、后臺(tái)接口跨域設(shè)置
H5列表頁(yè)面通過(guò)Ajax方式請(qǐng)求后臺(tái)接口獲取列表數(shù)據(jù)來(lái)實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)，當(dāng)H5頁(yè)面和后臺(tái)接口服務(wù)不在一個(gè)Web服務(wù)器時(shí)需要進(jìn)行跨域訪問(wèn)。如果跨域訪問(wèn)，這里不在贅述了，一個(gè)簡(jiǎn)單的方法是在后臺(tái)接口響應(yīng)時(shí)設(shè)置以下消息頭：
response.setHeader("Access-Control-Allow-Origin","*");response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS");response.setHeader("Access-Control-Allow-Credentials","true");response.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With");
2、加入Ajax請(qǐng)求代碼請(qǐng)求后臺(tái)數(shù)據(jù)
3、添加數(shù)據(jù)處理的函數(shù)
4、改造示例代碼中上拉/下拉的動(dòng)作函數(shù)
此步驟完成后的效果圖如下：
5、參考圖文列表頁(yè)面（media-list.html）和右側(cè)帶數(shù)字角標(biāo)頁(yè)面（tableviews-with-badges.html）頁(yè)面的列表樣式改造列表展示樣式
右側(cè)帶數(shù)字角標(biāo)頁(yè)面（tableviews-with-badges.html）效果：
圖文列表頁(yè)面（media-list.html）效果：
改造后函數(shù)add()里面for循環(huán)的代碼塊如下圖所示：
完成后的效果如下：
小結(jié)
以上就是快速實(shí)現(xiàn)H5列表頁(yè)面的過(guò)程，相信大家看了之后也能夠快速實(shí)現(xiàn)一個(gè)H5列表頁(yè)面。
