小編最近在做一個任務：要求實作一個在微信公衆号裡面的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)，如下圖所示：
拷貝相關的代碼(
标簽中的内容)到我們的項目頁面中,拷貝完成後的效果圖如下：
動态加載資料
1、背景接口跨域設定
H5清單頁面通過Ajax方式請求背景接口擷取清單資料來實作動态加載資料，當H5頁面和背景接口服務不在一個Web伺服器時需要進行跨域通路。如果跨域通路，這裡不在贅述了，一個簡單的方法是在背景接口響應時設定以下消息頭：
response.setHeader("Access-Control-Allow-Origin