主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
这篇文章给大家带来了一些关于微信小程序的知识,主要介绍了关于wxml模板语法的相关内容,包括数据绑定、事件绑定、条件渲染、列表渲染等等。下面就让我们一起来看看吧,希望能帮到你。
【相关学习推荐:小程序学习教程】
WXML模板语法-数据绑定1。数据绑定的基本原则①在数据中定义数据。
②使用WXML中的数据
2.在相应的数据中定义页面的数据。js文件,并将数据定义到数据对象中:
3.mustache语法的格式将data中的数据绑定到页面进行呈现,并使用Mustache语法(双括号)包装变量。与vue中的插值表达式类似,语法格式为:
4.小胡子语法绑定的应用场景内容绑定属性运算(三元运算、算术运算等。) 5.动态绑定内容页面的数据如下:
该页面的结构如下:
6.动态绑定属性页的数据如下:
该页面的结构如下:
7.三元操作页面上的数据如下:
该页面的结构如下:
8.算术运算
WXML模板语法-事件绑定:1。什么是事件?事件是从呈现层到逻辑层的通信模式。通过事件,用户在呈现层的行为可以反馈到逻辑层进行业务处理。
2.小程序中常用的事件类型
绑定模式
事件描述
轻敲,水龙头
点击或绑定:点击
手指触摸并立即离开,类似于HTML中的click事件。
投入
绑定输入或绑定:输入
文本框的输入事件
变化
绑定更改或绑定:更改
当状态改变时触发
3.事件对象的属性列表当事件回调被触发时,会收到一个事件对象事件,其详细属性如下表所示:
属性
类型
解释
类型
线
事件类型
时间戳
整数
自页面打开触发事件以来经过的毫秒数。
目标
目标
触发事件的组件的一些属性值的集合。
当前目标
目标
当前组件的一些属性值的集合。
详述
目标
附加说明
高光
排列
触摸事件,当前停留在屏幕中的触摸点信息的数组。
改变接触
排列
触摸事件,当前变化的触摸点信息的数组。
4.target和currentTarget的区别在于触发事件的源组件,而currentTarget是当前事件绑定到的组件。例子如下:
当点击内部按钮时,点击事件将以冒泡的方式向外传播,这也将触发外部视图的tap事件处理程序函数。
此时,对于外部视图:
1.target指的是触发事件的源组件,因此e.target是内部按钮组件。
2.currentTarget指的是当前触发事件的组件,因此e.currentTarget是当前视图组件。
5.BindTap的语法格式在小程序中,HTML中没有onclick鼠标单击事件,而是使用一个Tap事件来响应用户的触摸行为。
(1)通过bindtap,可以为组件绑定点击触摸事件,语法如下:
②在中定义相应的事件处理函数。js文件,事件参数通过形式参数event(一般缩写为E)接收:
6.为事件处理程序中的数据赋值。通过调用this . setdata(data object)方法,可以再次为页面数据中的数据赋值。示例如下:
7.事件传递小程序中的事件传递参数比较特殊,在绑定事件时不可能同时向事件处理程序传递参数。例如,以下代码将无法正常工作:
因为applet将bindtap的属性值视为事件名称,所以它相当于调用名为BTN handler(123)的事件处理程序。
您可以为组件提供data-*自定义属性参数,其中*表示参数的名称。示例代码如下:
最后:
1信息将被解析为参数的名称。
2值2将被解释为参数值。
在事件处理程序中,可以通过event.target.dataset的名称获取特定参数的值。示例代码如下:
8.小程序中bindinput的语法格式,输入事件用于响应文本框的输入事件。语法格式如下:
(1)通过bindinput,可以为文本框绑定输入事件:
②在中定义事件处理函数。页面的js文件:
9.实现文本框和数据之间的数据同步:
①定义数据
②渲染结构
③美化风格
④绑定输入事件处理程序。
定义数据:
渲染结构:
美化风格:
绑定输入事件处理程序:
WXML模板语法-条件呈现:1。wx:if在子视图中,使用wx:if =“{ { condition } }“确定是否需要呈现代码块:
您还可以使用wx:elif和wx:else来添加else判断:
2.组合wx:if如果想一次控制多个组件的显示和隐藏,可以使用一个标签来封装多个组件,并在标签上使用wx:if控件属性。例子如下:
注意:它不是一个组件,它只是一个包容器,不会在页面中呈现。
3.在小程序中隐藏,直接使用hidden =“{ { condition } }“也可以控制元素的显示和隐藏:
4.wx: if和hidden ①的对比操作方式不同。
1 wx:if通过动态创建和移除元素来控制元素的显示和隐藏。
2种隐藏开关样式(显示:无/块;)来控制元素的显示和隐藏。
②使用建议
1频繁切换时,建议使用隐藏。
2当控制条件复杂时,建议使用wx:if配合wx:elif和wx:else在显示和隐藏之间切换。
WXML模板语法-列表呈现1。wx:for wx:for可以根据指定的数组循环呈现重复的组件结构。语法示例如下:
默认情况下,当前循环项的索引由index表示;当前循环项由item表示。
2.手动指定当前项的索引和变量名* 1使用wx:for-index指定当前循环项的索引的变量名。
使用wx:for-item指定当前项的变量名。
示例代码如下:
3.wx: key的使用类似于Vue列表渲染中的:key。小程序实现列表渲染时,也建议为渲染后的列表项指定唯一的键值,从而提高渲染效率。示例代码如下:
【相关学习推荐:小程序学习教程】
以上是微信小程序WXML模板语法总结的详细内容。更多资讯请关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- 微信小程序翻译功能上线:现已支持18种语言
- 如何使用微信小程序中的车牌号输入法(如何使用微信小程序中的车牌号输入法进行打印)
- 微信小程序无法获取位置信息怎么办?(微信小程序无法获取位置信息)
- 微信小程序如何实现九宫格跳(如何在小程序中配置九宫格抽奖)
- 如何调节微信小程序的亮度?
本文由主机参考刊发,转载请注明:微信小程序WXML模板语法总结(微信小程序模板csdn) https://zhujicankao.com/103931.html
评论前必须登录!
注册