美文网首页
微信小程序的指令与事件绑定

微信小程序的指令与事件绑定

作者: G_弦上的咏叹调 | 来源:发表于2019-08-20 11:30 被阅读0次

    一、指令

    1、

    1)wx:if   /   wx:elif   /   wx:else

    block   wx:if

    因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

    注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

    2)hidden

    wx:if vs hidden

    wx:if :组件会根据判断条件来控制一个元素是否渲染。(条件为false,则不会渲染这个元素。)

    hidden :组件始终会被渲染,只是简单的控制显示与隐藏。

    一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

    2、

    wx:for

    遍历一维数组

    遍历对象

    二、事件绑定

    事件类别

    tap:点击事件;

    longtap:长按事件;

    touchstart:触摸开始;

    touchend:触摸结束;

    touchcansce:取消触摸;

    事件绑定

    bind绑定;

    catch绑定;(能阻止事件冒泡)

    例如:绑定点击事件 bindtap

    page.wxml 文件

    <view bindtap="fn">点击</view>

    page.js 文件

    微信小程序事件绑定详解

    事件详解:(类型 type ; 时间戳 timeStamp;事件源组件 target ; 当前事件 currentTarget ; 触摸点数 touches)

    在冒泡的事件中: currentTarget 和 target是不一致的; currentTarget是我们绑定了的组件,target是发生事件的组件;

    调用项目下的其他事件及调用app.js里面的事件:

    相关文章

      网友评论

          本文标题:微信小程序的指令与事件绑定

          本文链接:https://www.haomeiwen.com/subject/fazrrctx.html