微信小程序wx:for循环的用法

Posted 2021-02-28 笨小孩

今天写小程序的循环循环，估计是之前tp写习惯了，用wx:for的时候一直把它放在ul标签里，导致他最后循环出的结果是一串ul，但我实际上是想循环里面的li，所以记录一下，免得以后忘记了。

示例：

<ul class="demo-ul" >
               <block  wx:for=‘{{demo}}‘ wx:key=‘id‘>
                 <li class="demo-ul-li" >
                   <navigator class="demo-ul-a" url="/pages/demo/content/content?id={{item.id}}">
                     <image class="demo-ul-li-img"
                      src="https://www.xinhuang.net.cn/{{item.img}}" moede=‘widthFix‘></image>
                     <view class="demo-ul-li-p" style="overflow:hidden;">{{item.name}}</view>
                   </navigator>
                 </li>
               </block>
</ul>

wx:for是循环标志，里面的值是要循环的数组，wx:key是分类标志，这两个是必要的，原先应该安在li里面，但根据小程序的建议，我在li外加了一层block，并把循环标志写在了里面。

在需要使用数据的地方就用双大括号语法（{{}}）写上item.你要使用的数据，item代表的是数组当前条的所有数据。