? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

歡迎點(diǎn)擊觀看我的視頻

循環(huán)渲染是啥？知道你是寫代碼的，可在這里你總得講點(diǎn)人話吧。行，行行。那聽你的，循環(huán)渲染就是把一堆數(shù)據(jù)挨個(gè)顯示在小程序頁(yè)面上，這個(gè)，嗯，是講明白了，可你講這個(gè)有什么用呢？嘿嘿，這個(gè)技能啊，可以幫助你把自己的商品展示到小程序頁(yè)面里面，是您實(shí)現(xiàn)小程序開發(fā)自由的一小步啊，繼續(xù)學(xué)下去，實(shí)現(xiàn)一個(gè)小目標(biāo)也是指日可待啊。

那么要怎么做呢？好，那么今天，我們就說(shuō)道說(shuō)道這個(gè)循環(huán)渲染。

內(nèi)容包括啥呢，首先還是照例，先來(lái)剖析剖析這個(gè)程序員的黑話體系，要展示這個(gè)一堆數(shù)據(jù)在小程序上面，我們得事先準(zhǔn)備一些數(shù)據(jù)，在哪里準(zhǔn)備呢，哎呀，就在這個(gè)js文件里面塞上這些個(gè)數(shù)據(jù)啊，如果用黑話表達(dá)，就是申明數(shù)據(jù)。而這個(gè)數(shù)據(jù)的類型呢，無(wú)外乎數(shù)組或者列表。有人問(wèn)啦，這個(gè)數(shù)組和列表有啥區(qū)別呢，一句話解釋一下啊，列表就是復(fù)雜一點(diǎn)的數(shù)組。

然后呢，我們就要在這個(gè)wxml文件里面做渲染了，這次是循環(huán)渲染，所以要用到一些循環(huán)的控制屬性wx:for以及wx:key來(lái)實(shí)現(xiàn)循環(huán)展示這些數(shù)據(jù)。

具

體怎么做呢，我們接著往下看，

我們首先在js文件中的data里面放上一個(gè)數(shù)組，里面塞上三個(gè)東西蘋果，橘子以及香蕉，哎，都是大家平時(shí)愛(ài)吃的水果，給它起個(gè)名字叫arr1

下面呢安排一個(gè)列表arr2，里面放上一個(gè)id，以及對(duì)應(yīng)的name，依次為黃瓜，胡蘿卜，土豆。哎，下面這種結(jié)構(gòu)就是個(gè)列表，看上去比上面的數(shù)組復(fù)雜一點(diǎn)點(diǎn)。但是不要怕，以后見(jiàn)多了，你也就習(xí)慣了。

然后我們?cè)趙xml文件里面干啥呢，哎，放上兩個(gè)view組件。

我們把剛才在js文件里面準(zhǔn)備好的東西渲染或者用人話說(shuō)就是展示到小程序上。注意了，我們要把這個(gè)wx:for屬性給用上，等于號(hào)后面跟著的是雙引號(hào)下面的雙大括號(hào)，這個(gè)是以前我們講過(guò)的mustache語(yǔ)法，我們把數(shù)組以及列表的名字安排上，arr1和arr2，后面呢我們要跟上一個(gè)wx:key屬性，這個(gè)呢是微信開發(fā)的強(qiáng)制性規(guī)定，用來(lái)提高循環(huán)性能的，對(duì)于數(shù)組呢，我們就用默認(rèn)的index，對(duì)于列表呢，我們就把其中一項(xiàng)的名字放上去就行了，注意了這里不能用mustache語(yǔ)法了，用引號(hào)就可以了。

另一個(gè)注意點(diǎn)呢，就是每個(gè)循環(huán)項(xiàng)得用item表示，如果只是數(shù)組，你就用item好了，如果是列表，你要展示，就得在item后面加上具體的名字，比如id，你的用item.id,比如name，你的用item.name

好了知識(shí)點(diǎn)講到這里，我們打開微信開發(fā)者工具，來(lái)實(shí)際運(yùn)用一下啊。

歡迎點(diǎn)擊觀看我的視頻

OK今天的課程，主要就是講這個(gè)循環(huán)渲染的實(shí)現(xiàn)，有了這個(gè)，您就能把自己的東西展示在微信小程序上面了，如果您滿意的話，那就請(qǐng)您動(dòng)動(dòng)發(fā)財(cái)?shù)氖种更c(diǎn)個(gè)贊，支持一下吧，好了，拜了個(gè)拜，下回見(jiàn)！

?

?