基础语法2

列表循环

wx:for="数组或对象"	wx:for-item="循环项名称"	wx:for-index="循环项索引"

• wx:for-key="唯一值"，用于提高列表渲染的性能

  • wx:for-key="*this"，遍历数组的每一项，要求当前数组每一项不能有重复

• 如果只有一层循环，(wx:for-item和wx:for-index)都可以省略，默认情况下，我们会拿到item和index

<!-- 遍历数组 -->
<view>
  <!-- view相当于web中的div -->
  <!-- <view wx:for="{{anime}}" wx:for-item="item" wx:for-index="index" wx:key="index"> -->
  <view wx:for="{{anime}}" wx:key="index">
    名称：{{item}}
  </view>
</view>

//遍历对象
<view>
  <view wx:for="{{person}}" wx:key="key" wx:for-item="value">
    {{value}}
  </view>
</view>

条件渲染

• wx:if=""，wx:elif=""，wx:else=""
  • 切换显示时直接将元素从页面移除掉

<view>
  <view wx:if="{{false}}">显示1</view>
  <view wx:elif="{{true}}">显示2</view>
  <view wx:else="{{false}}">显示3</view>
</view>

• hidden
  • 在标签上加入属性hidden可以实现隐藏
  • hidden="{{true}} "同样可以实现隐藏
  • 切换显示时设置元素display为none

<view>
  <view hidden="{{false}}">hidden</view>
</view>

[ ]: 如果标签不是需要频繁的切换显示，优先选择wx:if，否则使用hidden

事件绑定

• 通过将bind与事件类型字符串相连即可绑定一个事件，如bindinput

常见的事件类型

• input
  • 文本输入框在正在输入内容时触发

<input type="text" bindinput="handleInput" />

• tab
  • 点击时触发。小程序没有click，tab即为点击

<button bindtap="handleTab">+</button>

• touchmove
  • 手指触摸后移动触发

<view bindtouchmove="handleMove">
    move!
</view>

• touchcancel
  • 手指触摸动作被打断时触发，如弹窗，来电

<view bindtouchcancel="handleCancel">
    cancel!
</view>

更多事件类型见: (https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#事件详解)

事件触发

• 无法在小程序中的事件中直接传参，需通过自定义属性"data-"的方式传参

<button bindtap="handleTab" data-operation="{{1}}">+</button>

• 在对应的page页面中处理事件时
  • 通过setData设置data中的值
    • 直接修改this.data，而不调用this.setData()，是无法改变当前页面的状态的，会导致数据不一致
  • 通过事件源获取的值

<input type="text" bindinput="handleInput" />

Page({
  handleInput(e) {
    this.setData({
      num: e.detail.value
    })
  },

  handletab(e) {
    this.setData({
      // 在vue中调用data中的num直接使用this.num，而在小程序中，需通过this.data.num
      // 成功拿到通过data-传过来的参数
      num: e.currentTarget.dataset.operation + Number(this.data.num)
    })
  }