目录
[01 数据的定义和使用](#01 数据的定义和使用)
[02 for渲染](#02 for渲染)
[03 条件渲染](#03 条件渲染)
[04 小程序中的事件](#04 小程序中的事件)
[05 事件对象event 及传参](#05 事件对象event 及传参)
[06 动态绑定](#06 动态绑定)
01 数据的定义和使用
小程序里面也有小胡子语法{{}},定义数据需要在js文件的data对象中定义
小程序的js里面获取data数据的方式:
this.data.变量名
修改data里面的数据:
this.setData({ 键1:值1...可以一次修改多个数据 })
02 for渲染
wx:for="{{数组或者对象}}"
默认的值变量:item
默认的键的变量:index
wx:for 需要定义wx:key="自定义一个名字"
修改默认的变量名;
wx:for-index='键变量新名字'
wx:for-item="值变量新名字"
03 条件渲染
wx:if="{{变量或者表达式}}"
如果{{}}里面为false则元素不渲染
如果想要让元素不显示 使用hidden属性 为true 表示隐藏 为false 表示显示
搭配使用: wx:elif wx:else
04 小程序中的事件
bind:事件名称="事件驱动函数名" 冒泡
catch:事件名称="事件驱动函数名" 没有冒泡
点击 tap 小程序没有click
函数定义在和data同级的位置直接写函数名即可
事件类型:
类型 触发条件 最低版本
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断,如来电提醒,弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后,超过350ms再离开,
如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 1.5.0
longtap 手指触摸后,超过350ms再离开(推荐使用 longpress 事件代替)
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
touchforcechange 在支持 3D Touch 的 iPhone 设备,重按时会触发
05 事件对象event 及传参
小程序的事件驱动函数一样也有event对象
直接在事件驱动函数里面获取即可
target 表示本次触发事件的那个对象
currentTarget 表示绑定当前事件的那个原始元素
事件传参
bind:事件名称="事件驱动函数(传参)" 错误!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
传参要通过data-* 属性 *代表自定义的属性名
data-*="{{变量或者除了字符串以外的其他类型的数据}}"
06 动态绑定
小程序中没有vue中 v-bind指令
如果标签上面的属性想要绑定一个变量或者表达式
在属性值的双括号里面定义{{变量或者表达式}} 可以实现vue中v-bind的效果