前端h5頁面怎麼開發（如何製作h5長頁面）

小編最近在做一個任務：要求實現一個在微信公眾號裡面的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","*");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請求程式碼請求後臺資料

3、新增資料處理的函式

4、改造示例程式碼中上拉/下拉的動作函式

此步驟完成後的效果圖如下：

5、參考圖文列表頁面（media-list.html）和右側帶數字角標頁面（
       tableviews-with-badges.html）頁面的列表樣式改造列表展示樣式

右側帶數字角標頁面（
       tableviews-with-badges.html）效果：

圖文列表頁面（media-list.html）效果：

改造後函式add()裡面for迴圈的程式碼塊如下圖所示：

完成後的效果如下：

小結

以上就是快速實現H5列表頁面的過程，相信大家看了之後也能夠快速實現一個H5列表頁面。另外小編特地整理了下MUI框架的示例程式碼以及小編完成的H5頁面的程式碼，需要的同學可以關注我們的同名微信公眾號“麻辣軟硬體”，後臺回覆mui獲取原始碼下載地址。