网站文章采集工具,驻马店 网站制作,手机怎么网站模板,黄页内容这一节讲解列表渲染的两个进阶用法#xff1a;
如果需要对默认的变量名和下标进行修改#xff0c;可以使用 wx:for-item 和 wx:for-item#xff1a; 使用 wx:for-item 可以指定数组当前元素的变量名使用 wx:for-index 可以指定数组当前下标的变量名 将 wx:for 用在 标签上
如果需要对默认的变量名和下标进行修改可以使用 wx:for-item 和 wx:for-item 使用 wx:for-item 可以指定数组当前元素的变量名使用 wx:for-index 可以指定数组当前下标的变量名 将 wx:for 用在 标签上以渲染一个包含多个节点的结构块 并不是一个组件它仅仅是一个包装元素不会在页面中做任何渲染只接受控制属性 标签在 wxml 中可以用于组织代码结构支持列表渲染、条件渲染等
下面打开微信开发者工具演示一下这两个进阶用法
进阶用法一 在 pages/cate/cate.js 中添加数据声明如下 Page({data: {numList: [1,2,3],fruitList: [{id: 1, name: },{id: 2, name: },{id: 3, name: }],obj: {name: tom,age: 10}}
})在 pages/cate/cate.wxml 中添加进阶用法一的演示代码如下 !-- 如果需要修改默认的变量名需要使用 wx:for-item 属性--
!-- 如果需要修改默认的下标变量名需要使用 wx:for-index 属性--
!-- 两个属性需要和 wx:for 写到同一个组件上 --
!-- 在重命名后需要使用最新的变量名获取数据信息 --
!-- 数组 --
view wx:for{{ fruitList }} wx:keyid wx:for-itemfruitItem wx:for-indexi{{ fruitItem.name }}
/view!-- 对象 --
view wx:for{{ obj }} wx:keykey wx:for-itemvalue wx:for-indexkey{{ value }} - {{ key }}
/view刷新页面可以看到具体的演示效果如下
进阶用法二
在 pages/cate/cate.js 中添加数据声明如下
Page({data: {numList: [1,2,3],fruitList: [{id: 1, name: , price: 66},{id: 2, name: , price: 77},{id: 3, name: , price: 88}],obj: {name: tom,age: 10}}
})在 pages/cate/cate.wxml 中添加页面样式如下
!-- 方法一 --
view wx:for{{ fruitList }} wx:keyid wx:for-itemfruitItem wx:for-indexiview名字{{ fruitItem.name }}/viewview价格{{ fruitItem.price }}/view
/view!-- 方法二 --
!-- block 不是一个组件只是渲染元素 --
!-- 也就是只是包装元素可以组织代码结构支持列表渲染 --
!-- block 不会在页面中做任何渲染只接受控制属性 --
block wx:for{{ fruitList }} wx:keyid wx:for-itemfruitItem wx:for-indexiview名字{{ fruitItem.name }}/viewview价格{{ fruitItem.price }}/view
/block刷新页面可以看到具体效果如下 参考视频尚硅谷微信小程序开发教程
