微信小程序的頁面渲染（if/for）

下面，粗略的介紹一下微信小程序的條件渲染、列表渲染、數據綁定等，詳細的內容大家可以去看微信小程序的API,在此只做簡單描述，希望能幫助到大家

條件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

 

 

block wx:if

block和template差不多，在控制台不可見標簽

因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 <block/> 標簽將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block> 

注意： <block/> 並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

列表渲染

<!--wxml-->

1.<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>//自定義數組循環


<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {

    zero：6，
    array: [1, 2, 3, 4, 5]
  }
})

2.此處的wx:for-item='newItem'可以不用相當於把item賦給newItem，

不寫時下面的newItem.title換成item.title。此處的wx:for-index='id'其實就是每一個item的索引

<view wx:for="{{newList}}" wx:for-item='newItem' wx:for-index='id' wx:key='{{id}}'>

<view>{{id+1}}.{{newItem.title}}</view>

<view>{{newItem.content}}</view>

</view>

 

數據綁定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

 

對象解構：

模板：

此處的template是虛擬的標簽，在控制台的標簽元素是看不到的，所以向該標簽

內寫內容是無法顯示的只能通過如下方法用is調用

1.1<!--wxml--><template name="staffName"><view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view></template>

//表示控制以上name=staffName下的view的視圖，其中data調用對象時用三個點表示


<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

 

 

1.2//is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

 

 

2. <templateis="objectCombine"data="{{for: a, bar: b}}"></template>

Page({
  data: { a: 1, b: 2 } }) 

最終組合成的對象是 {for: 1, bar: 2}

3. 如果對象的 key 和 value 相同，也可以間接地表達。

<template is="objectCombine" data="{{foo, bar}}"></template> 

Page({
  data: { foo: 'my-foo', bar: 'my-bar' } }) 

最終組合成的對象是 {foo: 'my-foo', bar:'my-bar'}