問題描述

大家學(xué)習(xí)程序設(shè)計(jì)都知道for循環(huán)，而且很多編程都需要用到 for 循環(huán)。在制作微信小程序特別是列表頁面的時(shí)候，是否有遇到過列表元素很多或者不確定的情況，如果一個(gè)一個(gè)的去敲就會(huì)有很大的工作量非常的麻煩。那么可不可以用 for 循環(huán)來解決這個(gè)問題呢？

解決方案

編程的人都知道for循環(huán)是一種循環(huán)語句。當(dāng)元素的數(shù)量很多的時(shí)候，用 for 循環(huán)來遍歷元素解決一些問題就顯得非常的方便。微信小程序也一樣，大家通?？吹降囊恍┝斜眄撁娑际怯珊芏嗟脑亟M成的，如果一個(gè)框框一個(gè)框框的去寫代碼效率就特別低了。但是用小程序中 wx ： for 屬性就可以實(shí)現(xiàn)對(duì)列表的快速渲染了。

代碼實(shí)現(xiàn)：

在js 中對(duì)頁面內(nèi)容定義各種數(shù)據(jù)構(gòu)成一個(gè)對(duì)象數(shù)組；

novel是對(duì)該組數(shù)據(jù)的命名。

在wxml中對(duì)頁面進(jìn)行渲染，將綁定的數(shù)據(jù)輸出到視圖中；

wx:for="{{}}" 屬性：實(shí)現(xiàn)視圖層 for 循環(huán)的控制結(jié)構(gòu)；

使用for循環(huán)就需要將之前定義的

{{novel.name}} 、 {{novel.comment}} 、 {{novel.imagepath}}

改為 {{item.name}} 、 {{item.comment}} 、 {{item.imagepath}} ， item 為一個(gè)抽象的循環(huán)控制變量。 如果不需要遍歷所有的數(shù)據(jù)那么就在之前定義的 {{novel[1].~~}} 中加一個(gè)索引（你需要第幾位就加第幾位的索引）；

{{index+1}}：循環(huán)控制變量。

在wxss中對(duì)頁面元素進(jìn)行布局。

效果圖：

結(jié)語

在微信小程序中使用for循環(huán)對(duì)列表進(jìn)行渲染非常的方便而且很靈活。這次的列表渲染需要理解 item 和 index 兩個(gè)循環(huán)控制變量以及 wx ： for 屬性。另外對(duì)頁面元素的調(diào)整布局也很重要，要讓頁面看起來美觀。