用户工具

站点工具


mina:code_composition

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录前一修订版
后一修订版
前一修订版
mina:code_composition [2020/08/24 19:45] – [4.4 事件绑定] sabertoymina:code_composition [未知日期] (当前版本) – 外部编辑 (未知日期) 127.0.0.1
行 201: 行 201:
  
 仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。[[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/|WXML]] \\ 仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。[[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/|WXML]] \\
 +
 +=== - 双向绑定语法 ===
 +
 +<code xml>
 +<input value="{{value}}" />
 +</code>
 +
 +如果使用 this.setData({ value: 'leaf' }) 来更新 value ,this.data.value 和输入框的中显示的值都会被更新为 leaf ;但如果用户修改了输入框里的值,却不会同时改变 this.data.value 。
 +
 +如果需要在用户输入的同时改变 this.data.value ,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model: 前缀
 +
 +<code xml>
 +<input model:value="{{value}}" />
 +</code>
 +
 +双向绑定的表达式有如下限制:
 +
 +只能是一个<wrap hi>单一字段</wrap>的绑定
 +
 +
 +
 +
  
 ==== - 列表渲染 ==== ==== - 列表渲染 ====
行 542: 行 564:
   * 此时,页面的 this.data.handlerName 必须是一个字符串,指定事件处理函数名;   * 此时,页面的 this.data.handlerName 必须是一个字符串,指定事件处理函数名;
   * 如果它是个空字符串,则这个绑定会失效。   * 如果它是个空字符串,则这个绑定会失效。
 +
 +==== - 事件的捕获阶段 ====
 +
 +捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。
 +
 +可以采用''capture-bind''、''capture-catch''关键字,后者将中断捕获阶段和取消冒泡阶段。
 +
 +在下面的代码中,点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
 +
 +<code xml>
 +<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
 +  outer view
 +  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
 +    inner view
 +  </view>
 +</view>
 +</code>
 +
  
  
mina/code_composition.1598269502.txt.gz · 最后更改: 2020/08/24 19:45 由 sabertoy