微信小程序怎么设置WXML


这篇文章主要讲解了“微信小程序怎么设置WXML”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎么设置WXML”吧!数据绑定的基本原则在 data 中定义数据在页面对应的.js文件中,把数据定义到data对象中,如下图在home页面中的home.js中定义home页面的data数据:使用Mustache语法()将data中的数据绑定到页面中并进行渲染:Mustache语法可以用于动态绑定内容、绑定属性和进行数据运算(三元运算、算术运算等)事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理,类似于html中有一个点击事件onclick,这个点击事件对应的行为方法是’getData’,当用户在渲染层点击’getData’方法时,逻辑会根据getDta方法中的内容进行数据处理。小程序常用绑定事件小程序常用事件对象的属性列表注意:target和currentTarget的区别:target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件,只对当前组件有用。bindtap的语法格式小程序中没有htnl中的onclick点击事件,通过tap事件响应用户的行为,通过bindtap为用户绑定btnTapHandler事件示例如下:事件传参微信小程序不能在绑定时间的额时候,同时为事件处理函数传参。因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123) 的事件处理函数。微信小程序传参的正确方法应该时为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,如:在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:bindinput的语法格式在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:通过 bindinput,可以为文本框绑定输入事件:在页面的.js文件中定义事件处理函数:案例一:实现文本框和data之间数据同步步骤:定义数据->渲染结构->美化样式->绑定input事件处理函数在小程序中,使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块:也可以用 wx:elif 和 wx:else 来添加 else 判断:如果要一次性控制多个组件的展示与隐藏,可以使用一个 标签将多个组件包装起来,并在 标签上使用 wx:if 控制属性,block是一个包裹性质的容器,不对页面进行任何渲染,示例如下:在小程序中,直接使用 hidden=”{{ condition }}” 也能控制元素的显示与隐藏:注意:wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏 hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏. 需要频繁切换时,建议使用 hidden 控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换使用 wx:for-index 可以指定当前循环项的索引的变量名使用 wx:for-item 可以指定当前项的变量名类似于 Vue 列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值,从而提高渲染的效率,示例代码如下感谢各位的免费云主机域名阅读,以上就是“微信小程序怎么设置WXML”的内容了,经过本文的学习后,相信大家对微信小程序怎么设置WXML这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是百云主机,小编将为大家推送更多相关知识点的文章,欢迎关注!

相关推荐: 如何使用Python制作自已的动态屏保

这篇文章主要介绍“如何使用Python制作自已的动态屏保”,在日常操作中,相信很多人在如何使用Python制作自已的动态屏保问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用Python制作自已的动态屏保”的疑惑有所帮助!接…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 03/28 10:06
下一篇 03/28 10:10

相关推荐