微信小程序wx:for 的使用以及wx:key绑定

概述

wx:for基本使用
wx:for-item和wx:for-index重新命名item和index
wx:key两种绑定方式以及注意事项

wx:for基本使用

业务层数据

Page({data: {name: 'Leung',}
})

视图层
wx:for遍历时候每一项名称为item每一项索引名称为index

<view><block wx:for="{{name}}" wx:key="item"><text>字符:{{item}}</text><text>索引:{{index}}</text></block>
</view>

wx:for-item和wx:for-index实现item和index重命名

wx:for-item="str"将原来名称item修改成str
wx:for-index="i将原来索引名称index修改成i

<view><block wx:for="{{name}}" wx:key="str" wx:for-item="str" wx:for-index="i"><text>字符:{{str}}</text><text>索引:{{i}}</text></block>
</view>

wx:key绑定两种方式

方式一:item
方式二:*this 这个*this默认情况就是item

wx:for渲染存储对象的数组使用时候如何绑定wx:key

业务层数据

Page({data: {books:[{id:'001',name:'你不知道的JavaScript'},{id:'002',name:'JavaScript高级程序设计'}]}
})

视图层绑定数据

以下不要直接使用wx:key="item"或者wx:key="*this"因为此时循环遍历的每一项数据都是键值对的对象。wx:key="{}"解析变量之后转换字符串底层原理就是({}).toString()最终渲染成[object Object]无法实现优化。wx:for="books"遍历时候自动解析对象每一个属性,可以直接wx:key="id"

<view><block wx:for="{{books}}" wx:key="id" wx:for-item="book"><view>{{book.name}}</view></block>
</view>

微信小程序wx:for 的使用以及wx:key绑定相关推荐

微信小程序设置锚点定位，wx.pageScrollTo
微信小程序中使用 wx.pageScrollTo({)}:进行页面锚点定位,一定要将根目录设置为滑动的根据. 也就是 page 要设置样式为 overflow-y: auto:指定他的高度. 在其中, ...
微信小程序 Now you can provide attr `wx:key` for a `wx:for` to improve performance.
微信小程序用到"wx:for"时可能会在控制台报"Now you can provide attr "wx:key" for a "wx:f ...
微信小程序中断请求的处理，中断 wx.request() 请求
在微信小程序中,向后台发出一个请求A, 如果长时间后台不返回相应的数据,前端还处于接受状态, 这样会引起一些问题,那么就可以在前端代码中直接中断当前的请求: 下面发出一个请求: const task ...
微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放
微信小程序自带的方法 wx.previewMedia 预览图片和视频. 图片 wx.previewImage 支持PC端可以进行播放, 视频没有找到对应的方法在真机和手机端都可以进项展示,PC端不 ...
微信小程序可添加图片描述的wx.previewMedia
前言产品说什么也要在大图预览下加图片描述,我说微信小程序不支持,wx.previewImage和wx.previewMedia都是我们自己改不了的.但是无奈非得要,那我说:加可以,但是做不到像wx. ...
开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等
在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...
微信小程序扫描二维码条形码 (wx.scanCode)
前言在业务中遇到需要获取商品的二维码的信息返回商品的二维码信息,在调用后台的接口,首先想到用小程序的Api,wx.scanCode(Object object)获取二维码信息. 支持相机扫描或者相册 ...
微信小程序之实名认证人脸识别接口-wx.startFacialRecognitionVerify
小程序前端使用人脸识别功能绑定用户 //开始实名认证的方法 -- 调用摄像头 facialRecognitionVerify: function (userName, userIdCard) {wx ...
微信小程序授权地理位置被拒绝后 wx.getLocation接口调用失败问题
最近在开发小程序,需要用到位置信息. 但总有那么一小部分人会点击拒接授权,然后小程序就用不了了.因为是根据所在的城市信息来加载数据,所以就需要引导用户自己打开地理位置授权.像下图废话不多说直接上代码 ...
微信小程序用swiper 和 movable-view实现wx.previewImage功能
注:7.13号写的残缺版,7.14号写出来了完整版来了,最终代码贴文章最下边了相对于13号代码只改了html和js,和一个app.js中的节流方法. ------------------------ ...

微信小程序wx:for 的使用以及wx:key绑定

概述

wx:for基本使用

wx:for-item和wx:for-index实现item和index重命名

wx:key绑定两种方式

wx:for渲染存储对象的数组使用时候如何绑定wx:key

微信小程序wx:for 的使用以及wx:key绑定相关推荐

最新文章

热门文章