問(wèn)題描述

大家學習程序設計都知道for循環，而且很多編程都需要用到 for 循環。在制作微信小程序特别是列表頁面的時候，是否有遇到過列表元素很多或者不确定的情況，如(rú)果一個(gè)一個(gè)的去敲就會有很大的工作量非常的麻煩。那麼可(kě)不可(kě)以用 for 循環來解決這個(gè)問(wèn)題呢(ne)？

解決方案

編程的人都知道for循環是一種循環語句。當元素的數量很多的時候，用 for 循環來遍曆元素解決一些問(wèn)題就顯得非常的方便。微信小程序也一樣，大家通(tōng)常看到的一些列表頁面都是由很多的元素組成的，如(rú)果一個(gè)框框一個(gè)框框的去寫代碼效率就特别低了。但是用小程序中(zhōng) wx ： for 屬性就可(kě)以實現對列表的快速渲染了。

代碼實現：

在js 中(zhōng)對頁面内容定義各種數據構成一個(gè)對象數組；

novel是對該組數據的命名。

在wxml中(zhōng)對頁面進行渲染，将綁定的數據輸出到視圖中(zhōng)；

wx:for="{{}}" 屬性：實現視圖層 for 循環的控制結構；

使用for循環就需要将之前定義的

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

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

{{index+1}}：循環控制變量。

在wxss中(zhōng)對頁面元素進行布局。

效果圖：

結語

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