小編最近在做一個任務：要求實現一個在微信公眾號裡面的H5列表頁面。拿到這個任務我們首先要進行需求分析，由於是在微信公眾號也就是手機裡面的H5列表，所以就不可能像PC上的列表頁面那樣進行分頁處理，應該按照手機列表常用的上拉刷新，下拉重新載入的方式實現。所以這個任務主要實現以下兩點：

1、列表頁面需實現上拉刷新，下拉重新載入；

2、動態載入列表數據；

技術選型

確定後需求後就要選擇合適的技術框架和開發工具進行開發，由於小編在做這個任務之前也沒有手機H5開發的項目經驗，只在平時閱讀技術文章時有一些了解，所以當時想出了以下幾種選擇：

1、Eclipse工具+Juqery Mobile UI框架；

2、Eclipse工具+Juqery框架+iScroll框架；

3、HBuilder工具+MUI框架；

4、WeX5工具及其自帶的UI框架。

通過深入的比較以上四種組合，小編髮現HBuilder工具+MUI框架這個組合有明顯的優勢，主要表現在以下幾個方面：

1、HBuilder工具簡單、易用，尤其是強大的聯想功能可以極大的簡化開發；如下圖所示：

2、可以擴展豐富的插件，比如內置瀏覽器插件，可以實現刷新頁面；如下圖所示：

3、MUI框架具備豐富的示例及技術文檔，初學者也可以快速上手；如下圖所示：

4、MUI框架項目只需要引入mui.min.js、mui.min.css即可，是一個輕量級的框架。如下圖所示：

基於以上優勢，小編選擇HBuilder工具+MUI框架來完成H5列表頁面的開發，下面小編將會為大家介紹如何快速實現這個H5列表頁面。

實現上拉刷新/下拉重新載入的頁面效果

1、下載開發工具

大家可以首先到官網（www.dcloud.io）下載HBuilder工具，由於HBuilder工具是基於Eclipse擴展而來，所以下載完成後直接解壓縮就可以實現，雙擊解壓縮後的執行文件「HBuilderX.exe」即可打開HBuilder工具，如下圖所示：

2、創建項目

新建項目，選中「5+App」後在下拉框中選擇mui項目，如下圖所示：

輸入項目名稱後點擊創建按鈕即可創建項目，項目目錄結構如下圖所示：

初始index.html頁面代碼如下圖所示（右側瀏覽器頁簽是展示效果圖）：

3、拷貝示例頁面的代碼

找到上拉刷新，下拉重新載入的示例頁面（pullrefresh.html），如下圖所示：

拷貝相關的代碼（<body></body>標籤中的內容）到我們的項目頁面中,拷貝完成後的效果圖如下：

動態載入數據

1、後台介面跨域設置

H5列表頁面通過Ajax方式請求後台介面獲取列表數據來實現動態載入數據，當H5頁面和後台介面服務不在一個Web伺服器時需要進行跨域訪問。如果跨域訪問，這裡不在贅述了，一個簡單的方法是在後台介面響應時設置以下消息頭：

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請求代碼請求後台數據