微信小程序学习4--WXML动态模板语法详解

WXML动态模板语法详解

• 数据绑定
• 条件渲染
• 列表渲染
• 事件处理

数据绑定

官网文档

• 基本数据绑定
• 组件属性绑定：插值表达式的信息可以插入到属性中
• 插值表达式内部支持计算
• 对象操作：访问对象中的属性值（对象名称.属性名称）

<!-- 基本数据绑定 -->
<view>
  你好，{{uname}}
</view> 

<!-- 属性的值也可以是动态的 -->
<view data-uid='{{uid}}' class='{{cls}}'>测试属性</view>

<!-- 支持简单计算 -->
<view>{{1 + 1}}</view>

<!-- 支持复杂数据展示 -->
<view>
  {{info.age + '--------' + info.gender}}
</view>

条件渲染

• wx:if
• wx:elif
• wx:else

<view wx:if='{{score>=90}}'>优秀</view>
<view wx:elif='{{score<90&&score>=80}}'>良好</view>
<view wx:elif='{{score<80&&score>=60}}'>一般</view>
<view wx:else>just so so</view> 

block标签用法：

• block标签不会渲染到页面中

<view wx:if='{{flag}}'>Tom</view>
<view wx:if='{{flag}}'>Jerry</view>
<view wx:if='{{flag}}'>Spike</view>

<!-- block标签本身不会渲染 -->
<block wx:if='{{flag}}'>
  <view>kitty</view>
  <view>peppa</view>
  <view>ktty1</view>
</block>

hidden属性和wx:if的区别:

类似于vue中的中v-if和v-show的区别：

• 内置组件都有一个hidden属性：如果值为false就显示，为true就不显示
• 通过hidden控制标签渲染的话，无论是否显示内容，实际上都进行了渲染，类似于vue中的v-show
• 应用场景：如果要频繁的控制组件的显示或者隐藏，那么推荐使用hidden

列表渲染

• wx:for
• wx:key

<!-- 默认item表示其中一项数据 -->
<!-- 默认index表示数据项的索引 -->
<view wx:key='{{index}}' wx:for='{{list}}'>
  {{index}} {{item}}
</view>

• wx:for-index 给索引起一个别名
• wx:for-item 给数据项起一个别名

<view wx:for-index='num' wx:for-item='name' wx:key='{{index}}' wx:for='{{list}}'>
  {{num}} {{name}}
</view>

• wx:key 的作用：保证兄弟节点被唯一区分，主要用于提高性能
• 对象数组的遍历

<view wx:for-index='num' wx:for-item='name' wx:key='{{index}}' wx:for='{{listData}}'>
  {{num}} {{name.ename + '--' + name.cname}}
</view>

事件处理

• 支持的事件类型

事件的绑定方式：bind:【事件名称】、事件函数如何处理:需要在js文件中进行定义

<view bindtap='handleTap'>点击</view>

// js交互逻辑
handleTap () {
    // console.log('tap')
    // 事件处理函数中修改data中的数据
    // 小程序中不可以这样修改数据
    // this.msg = 'nihao'
    // 修改数据必须使用setData方法进行
    // 事件函数中的this是当前页面的实例对象
    // 数据的修改是同步的，页面的更新是异步的
    this.setData({
      msg: 'nihao'
    })
    console.log(this.data.msg)
 },

• 绑定事件方式

  • bind 事件绑定不会阻止冒泡事件向上冒泡
  • catch 事件绑定可以阻止冒泡事件向上冒泡

  <!-- 事件冒泡 -->
  <view bindtap='handleParent'>
    <view bindtap='handleChild'>点击</view>
  </view> 
  
  <view bindtap='handleParent'>
    <view catchtap='handleChild'>点击</view>
  </view>
  

• 如何控制事件捕获

  • capture-bind 不阻止捕获事件向内部传递
  • capture-catch 阻止捕获事件向内部传递

  <!-- 处理事件捕获 -->
  <!-- 必须添加冒号进行绑定 -->
  <view capture-bind:tap='handleParent'>
    <view capture-bind:tap='handleChild'>点击</view>
  </view>
  
  <!-- 如何阻止捕获 -->
  <view capture-catch:tap='handleParent'>
    <view capture-bind:tap='handleChild'>点击</view>
  </view>
  

• 事件对象：可以通过事件函数获取

currentTarget和target的区别：

• 如果是事件源的话，currentTarget和target相同。
• 需要区分事件源和冒泡发生的事件行为。
• target表示事件源，就是实际触发事件的组件。
• currentTarget表示当前触发事件的组件，有可能是冒泡触发的事件。
• 如果要获取触发组件的data-数据，要使用event.target.dataset获取属性的数据。

<!-- 小程序输入框回车事件 -->
<input @confirm='handleEnter' v-model='keyword'  :placeholder='placeholder' type="text" />

示例代码

<view class="tab">
  <view class="title" bind:tap='handleChange'>
    <button wx:key='{{item.id}}' wx:for='{{tabData}}' data-id='{{item.id}}' 
            class="{{currentId === item.id? 'active': ''}}">{{item.name}}</button>
  </view>
  <view wx:key='{{item.id}}' wx:for='{{tabData}}' 
        class="content {{currentId === item.id?'active': ''}}">{{item.content}}</view>
</view>

 handleChange (e) {
    // console.log(e.target.dataset.id)
    this.setData({
      // 通过自定义属性获取按钮的id，进而更新当前的选中状态，进而影响类名的变化
      currentId: e.target.dataset.id
    })
  },

 data: {
    // 选项卡当前选中的ID
    currentId: '1',
    tabData: [{
      id: '1',
      name: 'tom',
      content: 'TOM'
    }, {
      id: '2',
      name: 'jerry',
      content: 'JERRY'
    }, {
      id: '3',
      name: 'spike',
      content: 'SPIKE'
    }, {
      id: '4',
      name: 'kitty',
      content: 'KITTY'
    }]
  },