整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          Vue.js教程(十二)-非父子組件間的通訊

          Vue.js教程(十二)-非父子組件間的通訊

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

          確定后需求后就要選擇合適的技術(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è)面。

          實(shí)現(xiàn)上拉刷新/下拉重新加載的頁(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è)面中,拷貝完成后的效果圖如下:

          動(dòng)態(tài)加載數(shù)據(jù)

          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)的代碼塊如下圖所示:

          完成后的效果如下:

          小結(jié)

          以上就是快速實(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ā)


          主站蜘蛛池模板: 国产一区在线播放| 日产一区日产2区| 相泽亚洲一区中文字幕| 日韩高清国产一区在线| 秋霞鲁丝片一区二区三区| 亚洲一区二区三区写真| 日韩一区二区三区射精| 国产中文字幕一区| 国产午夜精品一区二区三区漫画| 国产精品被窝福利一区 | 亚洲日本va午夜中文字幕一区| 国产AV一区二区三区无码野战| 海角国精产品一区一区三区糖心| 亚洲一区二区影视| 精品欧洲av无码一区二区三区| 性色AV一区二区三区| 国产成人一区二区三区在线观看| 日韩综合无码一区二区| 在线观看国产区亚洲一区成人| 亚洲国产综合无码一区二区二三区| 国产一区二区精品久久岳√| 成人毛片无码一区二区| 国模大胆一区二区三区| 濑亚美莉在线视频一区| 国产精品亚洲专一区二区三区| 成人免费视频一区二区三区| 精品国产一区二区三区久久狼| 成人久久精品一区二区三区| 精品一区二区三区在线观看l| 少妇无码一区二区二三区| 日韩人妻不卡一区二区三区| 中文字幕精品一区影音先锋| 亚洲Av永久无码精品一区二区| 亚洲av无码一区二区三区在线播放| AV无码精品一区二区三区| 另类ts人妖一区二区三区| 精品一区二区三区AV天堂| 香蕉视频一区二区三区| 免费无码一区二区三区| 国偷自产视频一区二区久| 不卡无码人妻一区三区音频 |