学习微信小程序WXML之列表渲染

原创 2018年04月16日 20:45:51

此贴为学习9 小时搞定微信小程序开发 的笔记
文档列表渲染 · 小程序

<!-- index.wxml-->
<view>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
        <view>{{index}}:{{item.name}}</view>
    </block>
</view>
//index.js
Page({
    data:{
        items:[
            { name:"商品A"},
            { name:"商品B"},
            { name:"商品C"},
            { name:"商品D"},
            { name:"商品A"}
        ]
    }
})

这里写图片描述

  • block标签不是组件,只是一个包装元素,在页面渲染时可以看到这个标签是不会被渲染出来的,只接受控制属性,wx:ifwx:for 等就是控制属性。如果要一次性判断或重复多个组件标签,比如对多个view组件进行同一重复动作,可以使用一个 <block/> 标签将多个组件包装起来。
    这里写图片描述
  • 通过wx:for来绑定名为items的数组。效果相当于for循环,重复渲染该组件。也可以嵌套,下边是一个九九乘法表。
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

这里写图片描述

  • index变量是当前元素在数组里的下标,也可以通过wx:for-index来指定数组当前下标的变量名。使用 wx:for-item 可以指定数组当前元素的变量名。
  • 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。
  • block wx:for 类似 block wx:if,也可以将 wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

这里写图片描述
- 详见文档列表渲染 · 小程序

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sriting/article/details/79966242

零基础学习微信小程序

“零基础学习微信小程序”课程,以腾讯官方资料为课程唯一参考资料,教会同学如何看懂文档,对文档中晦涩难懂的表述进行解释。实战角度出发,讲解微信小程序开发的相关知识点,分享小程序开发经验。
  • 2017年01月16日 08:10

微信小程序框架wxml(二)wxml列表渲染

列表渲染在之前的demo中已经应用过,在这里系统的记录一下。 1.wx:for的使用 (1)首先在js声明两个数组lipsticks和lipsticks2Page({ data: { li...
  • Crab0314
  • Crab0314
  • 2017-10-19 20:02:39
  • 202

微信小程序WXML之列表渲染

这一章节我们来学习一下我们在程序中另一个重要的语法结构循环结构,在java或C中是用for关键字的,在微信小程序中也是for关键字,但是不同的是语法结构有点不同,下面我们介绍一下。 wx:for 在...
  • zsx_xiaoxin
  • zsx_xiaoxin
  • 2016-10-19 11:23:29
  • 7316

微信小程序WXML 数据绑定、列表渲染、条件渲染、模板、事件、引用用法

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 数据绑定 {{message}} // page.js Page(...
  • timtian008
  • timtian008
  • 2017-01-17 15:25:00
  • 2531

小程序WXML之条件渲染

wx:if 在MINA中,用来判断是否需要渲染该代码块,这个和java、C中if条件判断是一样的,语法格式: wx:if="{{condition}}",双重大括号中是条件表达式 除了wx:if...
  • zsx_xiaoxin
  • zsx_xiaoxin
  • 2016-10-14 16:55:24
  • 8427

学习微信小程序WXML之条件渲染

此贴为学习9 小时搞定微信小程序开发 的笔记 文档:条件渲染 · 小程序 这是一个解决今天吃什么这一大难题的一小段代码。 &amp;lt;!--index.wxml --&amp;gt; ...
  • sriting
  • sriting
  • 2018-04-16 21:18:42
  • 33

微信小程序框架wxml(一)wxml数据绑定

今天系统的记录一下wxml的数据绑定功能。 首先给出wxss样式文件 /* pages/wxml/wxml.wxss */ .wxml-container{ padding: 0 20rpx ; ...
  • Crab0314
  • Crab0314
  • 2017-10-17 16:50:03
  • 495

微信小程序的学习(3)-视图层WXML

框架的视图层由WXML与WXSS编写。 其中WXML(WeiXin Markup language)用来描述页面的结构,其实就是页面中的组件的结构,其文件是.wxml;WXSS(WeiXin Sty...
  • Garment1991
  • Garment1991
  • 2016-12-18 16:12:09
  • 3039

微信小程序视图层的列表渲染 —— 微信小程序教程系列(11)

示例: test.wxml: 在组件内,使用属性wx:for=”{{ 数组 }}” ,数组当前项的变量名默认为item(变量需要使用双花括号) test.js: 在Page()内的data定义一...
  • michael_ouyang
  • michael_ouyang
  • 2017-02-13 15:38:23
  • 6061

1.3.1微信小程序 WXML

视图层 MINA的视图层由WXML与WXSS编写。 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language)用于描述页面的结构。 W...
  • iamsellen
  • iamsellen
  • 2017-04-22 10:56:48
  • 856
收藏助手
不良信息举报
您举报文章:学习微信小程序WXML之列表渲染
举报原因:
原因补充:

(最多只允许输入30个字)