框架视图层（二）

wxml

数据绑定
1.简单绑定。Mustache 语法双括号包裹变量，组件属性、控制属性、关键字变量绑定需要在双引号之内
2.运算。在{{}}中进行运算，三元、算术运算、逻辑判断、字符串运算、数据路径运算。
3.组合。组成新的对象和数组

      数组
       {{item}} 
          Page({
              data: {
                  zero: 0
              }
           })
      对象
    
    1.
        Page({
            data: {
              a: 1,
              b: 2
            }
      })
    2....三点展开语法
    
        Page({
          data: {
            obj1: {
                a: 1,
                b: 2
            },
            obj2: {
              c: 3,
              d: 4
            }
        }
    })
    3.同名变量覆盖、依靠键值直接获取
    
          Page({
            data: {
              obj1: {
                  a: 1,
                  b: 2
              },
            obj2: {
                b: 3,
                c: 4
            },
            a: 5
        }
      })
      最终data = {a: 5, b: 3, c: 6}

花括号和引号中出现空格，将会解析生字符串

列表渲染

• 默认当前项下标index,数组当前项的变量名为item，可以使用wx:for-item，wx:for-index 指定，此循环语法可以额嵌套

  
    
      {{i}} * {{j}} = {{i * j}}
    
  

• block wx:for

   {{index}}: 
   {{item}} 

• wx:key unique唯一字符串，保证动态改变或者追加时，每个组件的状态都不改变。*this代表循环中的item，必须唯一

页面  wxml
 {{item.id}} 
 Switch 
 Add to the front 

 {{item}} 
 Add to the front 

js wxjs
Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

注意

1.wx:for 参数为字符串，将默认为字符串数组
  === 
2.花括号和引号之间有空格，将被解析为字符串
 === 

条件渲染

• wx:if

基础语法
 1 
 2 
 3 

• block wx:if

**block是包装元素，不是组件，只能接受控制属性**

   view1 
   view2 

wx:if与hidden对比：判断条件切换频繁，使用hidden

模板（类似于layout）

• 定义模板

使用name属性定义模板

• 使用模板

使用is属性将模板声明并且传入需要的数据