微信小程序 wx:for/if/elif/else等循环的写法以及wx.key的运用

在页面里使用wx:for/if等循环体：
wx:for

<view wx:for="{{chatRecord}}" wx:for-index="index" wx:for-item="item"wx:key="*this"><!--中间的代码片段-->
</view>

其中chatRecord是在js页面里定义的一个聊天记录数组。wx:for-index是for循环每一项的编号，这里用index来指代；wx:for-item是for循环的每一项，这里用item指代。
注意：这里的wx:key如果不写，会触发警告：在使用"wx:for"的时候你应该使用"wx：key"属性，这样可以提升效率。在不使用wx:key的情况下，如果数组内的元素发生改变，则会重新加载所有的item，开销较大；而使用了wx:key之后，会将数组内的每个元素重新排序，未发生变化的对象就不会再重新刷新一遍了。
wx:key有两种使用方法：
1、wx:key="…"，此时字符串的值是能够唯一标示一个item的值，比如id之类。
2、wx:key="*this"，代表在for循环中的item自身。这种表示需要item本身就是一个唯一的字符串或者数字。（本例使用这种方法）
wx:if

<view wx:if="{{item.sendID == sender && item.isLocation == 0}}">
<!--中间的代码片段-->
</view>

这里引用了item中的sendID和isLocation的属性值，注意这里“与”条件是用“&&”表示的。
wx:elif及wx:else的语法格式差不多，这里不再赘述。

微信小程序 wx:for/if/elif/else等循环的写法以及wx.key的运用相关推荐

微信小程序学习9：获取用户信息进行登录操作 wx.getUserProfile
微信小程序学习9:获取用户信息进行登录操作wx.getUserProfile 2021年4月份左右微信对获取用户的API进行了更改.使用wx.getUserInfo只能获取用户的匿名信息. 要获取用户 ...
微信小程序中全局变量userInfo在其它页面不可用（wx.getUserInfo为异步获取信息）
app.js中获取用户的openid和userinfo,并存储为全局变量,当在index中调用getApp().globalData.userInfo时却返回为空值: getUserInfo: fun ...
关于微信小程序使用获取用户信息getUserProfile的问题：TypeError: wx.getUserProfile is not a function
1.前言今日在测试项目使用wx.getUserProfile获取用户信息成功后,将代码迁移到开发项目中发现如下问题 2.解决方法在右下角详情中,将版本设置为较新版本,楼主是测试了2.16.1 和 ...
微信小程序关于下载文件、打开文件预览文件(wx.downloadFile和wx.openDocument)
下载文件并打开文件示例API wx.downloadFile({url: 'https://example.com/audio/123', //仅为示例,并非真实的资源success (res) { ...
微信小程序完成简单的模仿抖音点赞效果动画wx.createAnimation
先看看效果图吧很明显主要有两个重点 (1)是点击任意地方赞的按钮就在哪里出现 (2)是放大缩小先看wxml吧 <view wx:if="{{swiperappear}}" ...
微信小程序开发双重for循环, wx: if else 语法
微信小程序开发双重for循环 (多重for循环) 重点在于 wx:for-item="problemItem" 和 wx:for-index="idx" 确定 ...
微信小程序下载文件wx.saveFile
//*注:wx.saveFile下载的文件只可以微信小程序内部访问,不可做外部访问 downloadFile: function(e) {wx.showLoading({title: '下载中...' ...
隐藏微信小程序左上角的返回或home按钮 wx.hideHomeButton
隐藏微信小程序左上角的返回或home按钮用的是 wx.hideHomeButton方法,但是这个方法是有限制的,管网说得又不清不楚,在百度也找不到相关的问题在用这个方法的时候遇到过很多问题和官方 ...
微信小程序齐枭飞：wx.navigateTo 不跳转问题
微信小程序--面页不跳转问题代码1:wx.navigateTo({url:'../logs/logs'})代码2:"tabBar": {"position":& ...

微信小程序 wx:for/if/elif/else等循环的写法以及wx.key的运用

微信小程序 wx:for/if/elif/else等循环的写法以及wx.key的运用相关推荐

最新文章

热门文章