父子組件間通訊,可以通過(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)系。