微信小程序 for,if语法 事件对象,事件传参

目录

[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的效果

相关推荐
梓彤科技15 小时前
样式已经更新,用户仍看到旧页面?武汉网站建设中的缓存版本控制
搜索引擎·小程序·seo·网站开发·geo
mashirro18 小时前
记一次基于ruoyi-vue新增小程序服务模块,小程序登陆相关
vue.js·小程序·mybatis
2601_9567436821 小时前
技术选型指南|D‑coding 小程序开发,定制能力如何转化项目服务价值
小程序·coding·开发经验
weishuangyun1231 天前
微信小程序怎么选公司?上线流程详解
大数据·小程序
show4331 天前
2026微信小程序视频转文字多语种识别引擎技术选型:22种方言25种外语挑战
微信小程序·小程序·音视频
lhldsg2 天前
县城外卖系统开发实战:从需求分析到上线全流程指南
java·小程序·需求分析
Kingexpand_com2 天前
旅游小程序怎么选型?模板与定制二次开发技术对比解析
小程序·旅游·小程序开发·旅行·定制开发
万岳科技系统开发2 天前
外卖跑腿小程序如何提升本地生活服务平台运营效率?
大数据·小程序·生活
MrFlySand_飞沙2 天前
uniapp开发微信小程序实现接入企业微信客服
微信小程序·小程序·uni-app·企业微信
码艺-Alimjan2 天前
JWT 的本质、误区与正确落地:一套不依赖任何框架的架构方法论-微信小程序代码案例-Api 安全性拉满
微信小程序·架构·notepad++