富力丹麦小镇P20-602的春天

一、对象数组

很多情况下，我们需要多次显示同一个条目(item)，或者说是某个类的不同实例对象。类似如下：

那么，你可以写很复杂的WXML，“手工”地为每个对象书写一块WXML，显示一个对象，向下面这个代码：

<view class="allbody-flex">

  <view class="title"> TOMMY游记 view>

  <view class="bodyone-flex">

    <view class="unit">

      <image class="img" mode="widthFix" src="../../image/natrue1.png">image>

      <view class="slogan">大好河山view>

      <view class="price">门票view>

    view>

    <view class="unit">

      <image class="img" mode="widthFix" src="../../image/natrue2.png">image>

        <view class="slogan">原始森林view>

      <view class="price">门票view>

    view>

    <view class="unit">

      <image class="img" mode="widthFix" src="../../image/natrue3.png"> image>

          <view class="slogan">无限原野view>

      <view class="price">门票view>

    view>

    <view class="unit">

      <image class="img" mode="widthFix" src="../../image/natrue4.png"> image>

          <view class="slogan">蓝天绿草view>

      <view class="price">门票view>

    view>

......

这显然不是编程手段，你可以把每个对象放入一个数组，然后利用组件的wx:for属性循环渲染这个数组的每一个元素，程序片段如下

在.JS文件中定义对象数组数据

page({

data:{

tempArray:[

{picPath :"../../image/natrue1.png",

text:"大好河山",

price:0},

{picPath :""../../image/natrue1.png"",

text:"原始森林",

price:20},

{picPath :"../../image/natrue3.png",

text:"无限原野",

price:30},

{picPath :"../../image/natrue4.png",

text:"蓝天绿草",

price:40}

]

},

})

上述tempArray 是在.js中定义得data对象的一个属性，这个属性是数组，这个数组的每个元素，又是一个对象，所以把tempArray称为对象数组。

那么，在.WXML中，可以利用wx:for属性实现循环渲染

<view class="unit">

<image class="img" mode="widthFix" src="{{item.picPath}}"image>

<view class="slogan">{{item.text}}view>

<view class="price">门票:{{item.price}}view>

view>

二、循环渲染注意事项

1：wx:for是小写的，是组件的一个属性；

2：wx:for后面跟着的是对象数组的数组名称，后续则用关键字item代替这个数组名称本身，关键字index代表数组下标；

3：上述代码，将循环渲染对象数组中的内容；

4：wx:for="{{arrayName}}"，中的arrayName的名称是data中定义的，可以是任意数组，不一定是对象数组；

5：上述wx:for的意思就是自动完成数组遍历；

使用构造一个代码块，类似c或.js中的{语句块}，表示在同一个逻辑控制下的一组语句，是个好思路！

三、更改wx:for的默认变量名

那么，如果不用默认的item和index做变量可以吗？可以！

可以将上述代码修改为：

<view class="unit">

<image class="img" mode="widthFix" src="{{body.picPath}}"image>

<view class="slogan">{{body.text}}view>

<view class="price">门票:{{body.price}}view>

view>

四、条件渲染

那么，用组件的wx:if="{{表达式}}"属性，可以实现条件渲染，也就是满足一定条件时显示某个组件(块)

组件块

这个语法中，理解的关键还是 组件的属性值用双引号括起来，页面表达式用{{}}胡子语法！

那么同理，还可以加wx:else，wx:elif="{{表达式}}"，如:

组件块

组件块

上述注意，是elif,不是elseif！

自己上机测试吧，