微信小程序的wx：for怎么使用

我自己写了一点，但都不行，js那边不知道要怎么配置才可以遍历

wxml

      <swiper-item wx:for="{{banneritem}}" wx:for-data="item" wx:key="{{item}}">
        <image src="{{item.bannerurl}}"></image>
      </swiper-item>

javascript

        if (res.data.code == 0) {
          let urlImg = [];
          // console.log(res);
          for(let i =0;i< res.data.messge.length ; i++){
            urlImg += res.data.messge[i].For_img;
          }
          _this.setData({
            banneritem : res.data.messge.length,
            // bannerurl : urlImg,
          })
        }

//这里是ajax，bannerurl 就是主要数据。
console.log（）输出的结果是：
For_img[0]: "xxx.xxxxxxxx.xx/img/1.jpg"
For_img[1]: "xxx.xxxxxxxx.xx/img/2.jpg"
For_img[2]: "xxx.xxxxxxxx.xx/img/3.jpg"
For_img[3]: "xxx.xxxxxxxx.xx/img/4.jpg"

改wxml的数据绑定和banneritem : res.data.messge这里，不用加length，加length后banneritem是数组长度，不是数组内容项了

wxml
<swiper-item wx:for="{{banneritem}}">
    <image src="{{item.For_img}}"></image>
</swiper-item>
javascript
if (res.data.code == 0) {
          // console.log(res);
          for(let i =0;i< res.data.messge.length ; i++){
            urlImg += res.data.messge[i].For_img;
          }
          _this.setData({
            banneritem : res.data.messge//.length//这里有问题，去掉.length，应该设置为数组
          })
          console.log(urlImg);
        }

参考v-for语法

这有一个简单的栗子
//循环渲染wx:for

    <!-- 自定义个体变量名称: wx:for-item="bigItem" -->
    <!-- 自定义下标变量名称: wx:for-index="myIndex" -->
    <view wx:for="{{arr}}" wx:key="index" wx:for-item="bigItem" wx:for-index="myIndex">
        <text>{{myIndex}}--{{bigItem.name}}</text>
    </view>

    data: {
        arr:[{name:'橘右京'},{name:'李白'},{name:'百里守约'},{name:'曜'}]
    },