整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
父子組件間通訊，可以通過(guò)一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來(lái)觸發(fā)事件和監(jiān)聽事件。 步驟：
1.創(chuàng)建空的Vue實(shí)例 var Event=new Vue();
2.觸發(fā)事件 Event.$emit('事件名',數(shù)據(jù));
3.監(jiān)聽事件 Event.$on('事件名',data=>{})
示例：
編最近在做一個(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ù)框架和開發(fā)工具進(jìn)行開發(fā)，由于小編在做這個(gè)任務(wù)之前也沒(méi)有手機(jī)H5開發(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)化開發(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è)面的開發(fā)，下面小編將會(huì)為大家介紹如何快速實(shí)現(xiàn)這個(gè)H5列表頁(yè)面。
1、下載開發(fā)工具
大家可以首先到官網(wǎng)（www.dcloud.io）下載HBuilder工具，由于HBuilder工具是基于Eclipse擴(kuò)展而來(lái)，所以下載完成后直接解壓縮就可以實(shí)現(xiàn)，雙擊解壓縮后的執(zhí)行文件“HBuilderX.exe”即可打開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è)面中,拷貝完成后的效果圖如下：
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)的代碼塊如下圖所示：
完成后的效果如下：
以上就是快速實(shí)現(xiàn)H5列表頁(yè)面的過(guò)程，相信大家看了之后也能夠快速實(shí)現(xiàn)一個(gè)H5列表頁(yè)面。另外小編特地整理了下MUI框架的示例代碼以及小編完成的H5頁(yè)面的代碼，需要的同學(xué)可以關(guān)注我們的同名微信公眾號(hào)“麻辣軟硬件”，后臺(tái)回復(fù)mui獲取源碼下載地址。
目名稱:
1.比賽APPS智能推薦
2.電腦類項(xiàng)目
3.動(dòng)畫特效類項(xiàng)目
4.購(gòu)物類項(xiàng)目
5.機(jī)器人路徑算法項(xiàng)目
6.機(jī)器學(xué)習(xí)項(xiàng)目
7.機(jī)器學(xué)習(xí)之海量數(shù)據(jù)識(shí)別系統(tǒng)
8.機(jī)器學(xué)習(xí)之?dāng)r擊短信篩選系統(tǒng)
9.機(jī)器學(xué)習(xí)之智能推薦系統(tǒng)
10.旅游類項(xiàng)目
11.汽車類項(xiàng)目
12.商城類項(xiàng)目
13.生活類項(xiàng)目
14.團(tuán)隊(duì)項(xiàng)目
15.微信小程序-地圖搜索類項(xiàng)目
16.微信小程序購(gòu)物商城項(xiàng)目
17.醫(yī)生端項(xiàng)目
18.醫(yī)院項(xiàng)目
19.醫(yī)者患者項(xiàng)目
20.藝術(shù)類項(xiàng)目
21.娛樂(lè)類項(xiàng)目
22.閱讀類項(xiàng)目
23.C++項(xiàng)目
24.HTML_MUI項(xiàng)目
25.HTML-ionic框架項(xiàng)目
26.React_Native商城購(gòu)物類項(xiàng)目
27SDK開發(fā)
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
