小程序的wx:if和wx:for的学习使用

2024-06-30 03:43:15

1.wx:if（条件渲染）

（1）wx:if="{condition}" 来判断是否需要渲染该代码块。
（2） block wx:if
　　　因为wx:if是一个控制属性，需要将它添加到一个标签上。
　　　如果要一次性判断多个组件标签，可以使用一个标签将多个组件包装起来，并在上边使用wx:if 控制属性。
　　　注：并不是一个组件，它只是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
　　　　　
（3） wx:if 和 hidden 的对比
　　被wx:if控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的UI结构。
　　wx:if是惰性的，如果没有触发条件，如果触发条件为flase，则该框架什么都不做，知道条件第一次为true才开始渲染。
　　而对hidden 来说，组件始终会被渲染，只是简单的控制显示与隐藏。
　　因此，wx:if有更高的切换消耗，而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情境下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

2.wx:for（条件渲染）

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。
　注：使用wx:for-item 可以指定数组当前元素的变量名；
　　　使用wx:for-index 可以指定数组当前下标的变量名。
使用wx:for实现的列表渲染的实例如下：　　
实现的效果如下图：

页面部分代码：

 <!-- 功能区，列表渲染，点击列表中某项跳转到对应页面 --><view class="funsArea"> <view class="fun" wx:for="{{funs}}" wx:key="key" wx:for-item="value" data-url="{{value.funUrl}}" bindtap="funHandle" ><text class="funTitle"> {{value.funTitle}} </text>   <text class="tz"> > </text> </view>    </view>

js部分代码：

//数据data值data: {funs:[{funTitle:'个人信息',funUrl:'userInfo/userInfo'},{funTitle:'我的订单',funUrl:'MyOrder/MyOrder'},{funTitle:'我的成就',funUrl:'MyAchievements/MyAchievements'},{funTitle:'我的收藏',funUrl:'MyCollection/MyCollection'},{funTitle:'消息中心',funUrl:'userNews/userNews'},{funTitle:'意见反馈',funUrl:'Feedback/Feedback'}]},...// 接受页面data-url的值；data中的值在event.target.dataset中funHandle:function(e){var funurl = e.target.dataset;// console.log(funurl);wx.navigateTo({url:e.target.dataset.url})},

小程序的wx:if和wx:for的学习使用相关推荐

微信小程序iBeacon获取问题（wx.onBeaconUpdate不执行）【已解决】
微信小程序iBeacon获取问题(wx.onBeaconUpdate不执行)[已解决] 问题描述软件硬件使用代码问题现象解决办法问题描述长话短说,使用某公司的iBeacon标签设备,开发微 ...
微信小程序保存视频到相册wx.saveVideoToPhotosAlbum（）
一.微信小程序保存视频到相册wx.saveVideoToPhotosAlbum() 功能描述保存视频到系统相册.支持mp4视频格式. 参数 Object object 属性类型默认值必填说明 ...
微信小程序提示框使用，wx.showToast
微信小程序提示框使用 1.wx.showToast在官方文档的位置 2.使用代码模板 wx.showToast({title: '价格不能等于0',icon: 'success',duration: ...
小程序毕设作品之微信在线教育视频点播学习小程序毕业设计（3）后台功能
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
小程序毕设作品之微信在线教育视频点播学习小程序毕业设计（7）中期检查报告
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
50行代码实现的艺术签名设计微信小程序,轻松对接公众号,涨粉神器,学习赚钱两不误.微信公众号引流工具.html,python学习小项目.艺术签名设计微信小程序,前端学习小项目有趣的项目
50行代码实现的艺术签名设计微信小程序,轻松对接公众号,涨粉神器,学习赚钱两不误先看效果这个小程序实现艺术签名设计的功能对接到公众号之后,相当于给你的公众号添加了一个功能,别人关注公众号后,可以 ...
三元运算微信小程序_微信小程序使用三元运算符代替wx:if
以地址列表中,默认地址是否选择为例. 先来看下wx:if的写法默认地址从上面的代码可以看出,标签要重复写2次,包括class样式等属性,设定某个地址为默认地址时将会有绑定事件bindtap等,还会 ...
解决微信小程序内下载视频失败wx.saveVideoToPhotosAlbum :fail invalid video
完美解决wx.saveVideoToPhotosAlbum保存视频到手机会出现的各种错误, 大致分为两步: wx.downloadFile(Object object) 文件资源到本地.客户端直接发起 ...
微信小程序音频的使用：wx.createInnerAudioContext的使用
需求是一进来音乐就开始播放,本来以为只有wx.playBackgroundAudio(使用后台播放器播放音乐,对于微信客户端来说,只能同时有一个后台音乐在播放.当用户离开小程序后,音乐将暂停播放:当用 ...
微信小程序上传API接口wx.uploadFile的坑
小程序的坑比较多,原因在于小程序开发文档相当的不全,所以开发小程序是比较痛苦的,但也正是因为坑多,技术却一步一步的往上升了...不知道该笑还是该哭. 进入正题:wx.uploadFile的坑坑一:返 ...

最新文章

热门文章