微信小程序 wxml组件开发（三） wx:for页面传参

     微信小程序是一个js和wxml端交互为主的前端设计，所以大部分小程序的设计都围绕着如何将js端的参数传递到wxml端，以及如何要用户通过wxml端调用参数到js端，进行交互。其中一个核心功能就是wx:for,在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

我们首先看看没有wx:for的js，wxml传参：

wxml端

{{index}}

js端

Page({
   data:{
    index:123
   },
  onLoad:function(){}
})

展示结果：

我们再来看看没有js端的wx:for的设计

  
    {{index}}
  

展示结果：

其中wx:for="{{4}}"就是数组调用，wx:key="{{index}}"就是数组的单元调用

接下来我们结合js端，制作图片展示界面

wxml端：

    
        
        {{item.title}}
      
  

 

wxss端

.scroll-view { 
    width: 100%;
    height: 240rpx;
    white-space:nowrap;  /* 规定段落中的文本不进行换行 */
}

JS端

Page({
   data:{
    scrollview: [
      {
        img: "https://xiaomo-1252848593.cos.ap-chengdu.myqcloud.com/view/1.jpg",
        title: 1
      },
      {
        img: "https://xiaomo-1252848593.cos.ap-chengdu.myqcloud.com/view/2.jpg",
        title: 2
      },
      {
        img: "https://xiaomo-1252848593.cos.ap-chengdu.myqcloud.com/view/3.jpg",
        title: 3
      },
      {
        img: "https://xiaomo-1252848593.cos.ap-chengdu.myqcloud.com/view/4.jpg",
        title: 4
      },
      {
        img: "https://xiaomo-1252848593.cos.ap-chengdu.myqcloud.com/view/5.jpg",
        title: 5
      }
    ]
   },
  onLoad:function(){}
})

以上就结合了,swiper和wx:for功能，完成了图片轮播展示功能，结果如下：

wx:for还可以实现嵌套功能,比如说如下

  
    
      {{a}} + {{b}} = {{a + b}}
    
  

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

  {{index}}: {{item.info}}

Page({
  data: {
    data_info: [{
      info: 'test',
    }, {
      info1: 'test1'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

  {{id}}: {{Name.info}}