小編最近在做一個任務：要求實現一個在微信公眾號里面的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請求代碼請求后臺數據